Diseño Web básico: PHP + HTML

Ayer por la tarde estuve hablando con un amigo mío que hace muy poco decidió meterse de lleno en el mundo de la programación Web, me comentó como podía hacer una Web que sólo se modificara el contenido del frame central, manteniendo siempre igual la cabecera y el pie de página. Aunque no soy un experto (ni mucho menos) en programación Web, tengo algunas nociones básicas y leyendo algún que otro tutorial aprendí ha hacerlo de la manera que os explico a continuación.

Puede que este How To no sea el más correcto y seguramente estará lleno de fallos para los profesionales pero creo que por lo sencillo se empieza.

Lo primero de todo es saber como queremos estructurar nuestra Web, es decir, la dividiremos en capas o layers con las etiquetas (o tag)  <div></div>. Normalmente, deberíamos tener una estructura como la siguiente:

Y el código podría ser algo parecido a esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Mi primera Web chula </title>
</head>
<body>
<div id="cuerpo_web">
<div id="cuerpo_2">
<br>
<div id="cuerpo_3">
HOLA MUNDO
</div>
</div>
<div id="pie_pagina">
<strong>No dejes de leer Control+Shift+Escape</strong>
</div>
</div>
</body>
</html>

Entonces, lo que en mi caso he hecho ha sido primero de todo, programar la Web en HTML para ir corrigiendo fallos de diseño, colores, tamaños de letra y demás. Hecho esto, divido la Web en tres partes:

  • Una cabecera o header
  • Un cuerpo central
  • Un pie de página o footer

Y estas tres partes las guardo en tres ficheros distintos:

  • header.html
  • inicio.php
  • footer.html

El resultado seria este:

  • Para el header.html
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Mi primera Web chula </title>
</head>
  • Para el inicio.php
<body>
<div id="cuerpo_web">
<div id="cuerpo_2">
<br>
<div id="cuerpo_3">
HOLA MUNDO
</div>
</div>
  • Para el footer.html
<div id="pie_pagina">
<strong>No dejes de leer Control+Shift+Escape</strong>
</div>
</div>
</body>
</html>

Esto se hace así porqué el siguiente paso llamaremos al fichero header.html y al fichero footer.html mediante php. Por eso, el fichero inicio lo hemos guardado con extensión php. Ahora debemos modificar el código del fichero inicio.php, usando la función include(); . Esta función la debemos usar en la primera línea de código de nuestro inicio.php mediante los tags <? php y ?>. Para llamar al footer.html, deberemos escribir en la última línea de código la función include();. El código quedaría de la siguiente manera:

<?php include("header.html"); ?>
<body>
<div id="cuerpo_web">
<div id="cuerpo_2">
<br>
<div id="cuerpo_3">
HOLA MUNDO
</div>
</div>
<?php include("footer.html"); ?>

Esta manera de trabajar nos permite ir cambiando sólo un fichero (inicio.php, contacto.php, etcétera …) manteniendo siempre igual la cabecera y el pie de página que, en el caso que queramos hacer alguna modificación, lo haremos sólo una vez para todo nuestro Site.

Un ejemplo de lo que os digo lo tenéis aquí. Si os fijáis, podéis ir navegando por el Site mientras va cambiando el “cuerpo” de la web pero no la cabecera ni el pie de página. Además, podéis cortar el código HTML donde queráis siempre que respetéis la apertura y el cierre de las etiquietas.

Espero haberos ayudado ni que sea un poquito.

Anuncios

1 Response to “Diseño Web básico: PHP + HTML”


  1. 1 Remix Bounce It 02/12/2014 en 13:49

    You will make it sound simple along with your business presentation on the other hand in finding this trouble for being seriously something I believe We would never ever fully grasp. It sort of feels as well elaborate and extremely large personally. I will be searching ahead on the future posting, I most certainly will try to receive the stick of it!


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s




Categorias

Enter your email address to follow this blog and receive notifications of new posts by email.

Únete a otros 386 seguidores

RSS Acceso Directo

  • Descuentos para viajes 06/10/2018
    ¿Estás buscando descuentos para tu próximo viaje? ¡Llegaste al lugar correcto! En este post quiero compartir con ustedes algunos servicios que uso, y que tienen un programa de referidos por el cual pueden obtener descuentos o crédito a favor. Para que el estos beneficios se apliquen solo tienen que asegurarse de anotarse a través de los […]

RSS Microsiervos

  • El engaño de las imágenes de las sondas Lunar Orbiter 06/18/2018
    Hemos hablado en varias ocasiones del Lunar Orbiter Image Recovery Project (Proyecto de Recuperación de Imágenes de los Lunar Orbiter, LOIRP). Es una iniciativa que tiene como objetivo rescatar las imágenes tomadas por las cinco sondas de la serie Lunar Orbiter entre 1966 y 1967 antes de que se pierdan para siempre, pues están almacenadas en unas cintas magn […]

RSS Bitelia

  • Aprende a gestionar la memoria y CPU que ocupan las pestañas y extensiones de Google Chrome 06/19/2018
    Si tu ordenador está teniendo problemas en su rendimiento, probablemente sea por la gran cantidad de pestañas que mantienes abiertas. Aprende a gestionarlas con Google Chrome y otros servicios. Con el paso de los años, los navegadores web se han convertido en aplicaciones muy robustas que van más allá de ser simples medios para visualizar contenido en intern […]
Anuncios

A %d blogueros les gusta esto: