PHP y MySQL. Aplicaciones Web: HTML I (segunda parte)
Anuncio
mailxmail - Cursos para compartir lo que sabes PHP y MySQL. Aplicaciones Web: HTML I (segunda parte) Autor: Johnny Zulca Mamani 1 mailxmail - Cursos para compartir lo que sabes 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 mailxmail - Cursos para compartir lo que sabes 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" "http://www.w3.org/TR/html4/loose.dtd"> Cumple el standard HTML 4.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> Cumple el standard HTML 4.0 y no contiene además elementos desaconsejables <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 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 mailxmail - Cursos para compartir lo que sabes 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-8859-1" / > 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="http://www.hosnet.org/music"> Ahora todas nuestras URLs relativas se referirán al directorio /music dentro del servidor http://www.hosnet.org. 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 mailxmail - Cursos para compartir lo que sabes 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 mailxmail - Cursos para compartir lo que sabes 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" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Mi primera pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </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" "http://www.w3.org/TR/html4/loose.dtd"> 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-8859-1"> 6 mailxmail - Cursos para compartir lo que sabes </head> 7 mailxmail - Cursos para compartir lo que sabes 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: http://localhost/alumno/cap2/html_1.htm El resultado en el navegador debería ser el siguiente: 8 mailxmail - Cursos para compartir lo que sabes 9 mailxmail - Cursos para compartir lo que sabes 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 http://www.w3g.com . * 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. < h 1 > < / h 1 > 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 mailxmail - Cursos para compartir lo que sabes 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> <!-- El cuerpo del documento iría a partir de aquí --> </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" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Mi primera pagina con imagen</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <!-- El cuerpo del documento iría a partir de aquí --> <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 mailxmail - Cursos para compartir lo que sabes 12 mailxmail - Cursos para compartir lo que sabes 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-8859-1"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="refresh" content="5;URL=http://www.jozuma.mobstop.com/cursos/"> <title>Jozuma online &copy;</title> </head> <body> <center> <p>Esta página se redireccionara en 5 segundos a esta dirección<br>http://www.jozuma.mobstop.com/cursos/</p> </center> </body> </html> 13 mailxmail - Cursos para compartir lo que sabes 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-8859-1"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="refresh" content="5;URL="> <title>Jozuma online &copy;</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 mailxmail - Cursos para compartir lo que sabes 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-8859-1" > 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-8859-1"> <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 &copy;</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 mailxmail - Cursos para compartir lo que sabes caracteres, palabras modificadas por elementos de línea, elementos multimedia, scripts de lenguajes embebidos ... </body> </html> 16 mailxmail - Cursos para compartir lo que sabes 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 mailxmail - Cursos para compartir lo que sabes 11. Caracteres especiales Caracteres especiales Dentro de los más conocidos estan los siguientes: 18 mailxmail - Cursos para compartir lo que sabes 12. Práctica (Formateo Caracteres, caracteres especiales) Práctica: html_6.htm - Formateo Caracteres, caracteres especiales <html> <head> <title>Estilos de l&iacute;nea y caracteres especiales</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <p>Este p&aacute;rrafo muestra varios estilos en una l&iacute;nea, tales como<br/> <b>negrita</b>, <i>itálica</i>, <big>texto grande</big>, <small>texto peque&ntilde;o</small>, <em>texto enfatizado</em>, <strong>texto destacado</strong>, and <tt>texto teletipo</tt>.</p> <p>Este p&aacute;rrafo muestra el uso de caracteres especiales<br> &quot; uso de comillas rectas &quot;<br> &lt; Uso de la apertura y cierre de los símbolos utilizados en etiquetas HTML &gt;<br> &ndash; Uso de guiones en algunas ocasiones describir ideas &ndash;<br> &lsquo; Uso de comillas simples &rsquo;<br> &ldquo; Uso de comillas dobles &rdquo;<br> &laquo; Uso de caracteres &raquo;<br> espaciado&nbsp;&nbsp;&nbsp;&nbsp;con el uso de: &copy; Copyright<br> &reg; Marca Registrada </p> </body> </html> 19 mailxmail - Cursos para compartir lo que sabes 20 mailxmail - Cursos para compartir lo que sabes 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 mailxmail - Cursos para compartir lo que sabes 14. Práctica (bloques de texto) Práctica: html_7.htm - Bloques de texto (párrafos) <html> <head> <title>Estilos de p&aacute;rrafo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </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 | 1069009013 | | releaseupdate | Wed, 8/28, 8:18pm | | rolfstatus | 0 | | feedupdate | 1069009861 | +---------------+-------------------+ </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 mailxmail - Cursos para compartir lo que sabes 15. Ejemplos de uso de cabecera Ejemplos de uso de cabeceras NOTA: Con este capítulo hemos llegado al final del curso. 23
