Apuntes PHP y Ejercicios unidad1
Anuncio
República Bolivariana de Venezuela Universidad Nacional Experimental de los Llanos Occidentales “Ezequiel Zamora” Programa de Ingeniería, Arquitectura y Tecnología Subproyecto de Algoritmo y Programación II Unidad I - INTRODUCCIÓN AL HTML Profesor: Marcos Tulio Jerez Bastidas Barinas, abril 2015 Objetivo general del curso Desarrollar habilidades y destrezas básicas para la resolución de problemas a través del diseño de algoritmos codificados en el lenguaje de programación PHP. El Inicio Para comenzar a trabajar debes conocer un poco del lenguaje HTML que es el lenguaje base para definir la estructura de una página Web, para este sentido vamos a comenzar a trabajar utilizando un bloc de notas, en mi caso que trabajo en Ubuntu (GNU/Linux) tengo instalado el editor Pluma, para luego utilizar otras herramientas más adaptadas a la creación de archivos PHP, que luego explicaré como preparar su computador para este trabajo. Editor de Textos “Pluma” Estructura básica de un archivo HTML: HTML es un Lenguaje de Híper Marcado de Texto, llamado así por tener la capacidad de darle formato principalmente al texto que conforma una página web, ya que al inicio de este tipo de archivos solo poseían este elemento, se realiza a través de etiquetas o marcas que definen el formato, ampliado por medio de atributos que se pueden modificar por cada etiqueta. Para entender un poco más vamos a comenzar la estructura mínima necesaria para la construcción de un archivo HTML. Para comenzar abriremos el editor de texto y luego guardaremos el archivo nuevo en una carpeta que dejaremos para nuestros ejercicios, el archivo será llamado ejercicio1.html, luego escribiremos el siguiente texto: En las líneas 1 y 6 tenemos las etiquetas <html> y </html>, la primera es la de apertura y la segunda de cierre y esta define al archivo como de tipo html, es decir, todo lo que este entre las dos etiquetas pertenecen a un archivo de tipo html. Normalmente para cada etiqueta de apertura existe una de cierre, aunque en algunos casos existen excepciones que después serán explicadas. Las etiquetas head definen la cabecera, esta presenta información de la propia página como el título y el idioma, luego el body que incluye la página en sí, es decir, en ella encontraremos el texto, imágenes y cualquier otro elemento que esta contenga. Empecemos a construir una página web: Ahora, agregaremos al código que ya tenemos las siguientes etiquetas: Dentro de la cabecera incluimos la etiqueta title que permite colocar el nombre de la página, además en el cuerpo colocamos las etiquetas font y center para incluir un texto centrado y luego con la etiqueta h1 definimos el tipo de título, este podría ser también h2 o h3 hasta h6 que cada una es más pequeña. Aquí podemos ver en la pestaña del navegador el título de la página que es Ejercicio 1, fue definido en la cabecera dentro de las etiquetas title, también vemos el titulo Hola de forma centrada. De los atributos y otras etiquetas: Podemos extender las características y elementos que cada etiqueta puede formatear agregando atributos adicionales a cada una de ellas, vamos a ver un ejemplo: En la etiqueta body agregamos el atributo bgcolor y le asignamos el valor gold, esto definió el color de fondo en dorado. En la etiqueta font agregamos el atributo color y asignamos el valor blue, cambiamos el color predeterminado del texto como azul. Además, utilizamos nuevas etiquetas como hr que no necesita ser cerrada y me dibujo una línea. También utilizamos la etiqueta p que permite delimitar un párrafo, ahora veamos como se ve nuestra página. El HTML como la mayoría de los lenguajes informáticos están diseñados en base al inglés, por lo tanto símbolos especiales como la ñ o la tilde, entre otros deben ser codificados de forma adicional, por ejemplo, para poder mostrar en nuestra página, la palabra página que presenta una tilde en la primera a se debió escribir usando el código especial &aacute que se incluyó dentro de la palabra sustituyendo la letra que debería estar acentuada. Imágenes en mi página: Teniendo en cuenta los siguientes cambios en el código: En la etiqueta body cambiamos el atributo bgcolor por background le asignamos como valor el nombre de un archivo jpg que debe estar en la misma carpeta o se debe hacer referencia a la ubicación del mismo si está en una carpeta distinta al archivo html, así de esa manera veremos que ahora el fondo de la página no es un color solido sino una imagen. También utilizamos la etiqueta img para insertar una imagen. Ahora veamos cómo está quedando nuestra página: Tablas en mi página: Ahora para construir una tabla en mi página debo conocer las siguientes etiquetas, th sirve para definir celdas de cabecera, tr que sirve para definir filas, td que sirve para definir celdas. Además de eso están los atributos colspan que permite combinar celdas en la misma fila, se declara colspan=”2” para decir que una celda de una fila tendrá el largo de dos columnas, el número varía dependiendo del largo que se requiera. También se usa rowspan para combinar celdas en la misma columna, se declara igual, pero en este caso el número define la altura expresada en filas. Los atributos border y bordercolor definen el grosor y el color del borde, vamos a ver el código: Veamos como se ve en el navegador: Listo, con lo expuesto hasta el momento y con la ayuda de la tabla de etiquetas y el libro de referencia XHTML ya podemos fácilmente diseñar nuestra primera página web, ahora debemos aprender a utilizar CSS para mejorar su apariencia y PHP con JavaScript para darle funcionalidad a nuestro sistema. Bibliografía Pérez, Javier E., (2008). Introducción a XHTML. Madrid: librosweb.es
