Como hacer una página web fácil, para subirla a internet
Tweet
Crear de forma sencilla tu propia página web copiando y pegando el código, conocer los elementos básicos del HTML que te permitan tener un sitio en internet. Plantillas y herramientas útiles para la edición y el diseño web.
Este es solo el primero de una serie de artículos en este sitio, que abordan todos los elementos del diseño web y de la publicación en internet, con un lenguaje fácil de comprender, escritos para los que no tienen conocimientos en lo absoluto de programación.
Dado el incremento del uso de internet y la necesidad de muchas personas de crear páginas y sitios web propios, en los cuales publicar contenido y promocionar sus ideas, las páginas de esta sección, también te podrán servir de utilidad a ti. Solo sigue leyendo y comprenderás que no es difícil.
Tener una página y un sitio en internet
Lo que se propone es crear una página web elemental que podrás ir mejorando, perfeccionando e irla adecuando a tu gusto, estilo y necesidades.
Con lo que aprendas, posteriormente podrás construir su propio sitio web y subirlo a un servidor. Nada de escribir signos extraños que a veces se nos dificulta hasta encontrarlos en el teclado, simplemente copiar el código que te muestro y pegarlo en tu archivo, solo tendrás que ingresar la información encontrarás en esta página.
Más adelante, con lo que aprendas, entenderás el formato de las plantillas prediseñadas, creadas por profesionales, de las que puedes descargar varias gratis en otra página, podrás editarlas y modificarlas a tu gusto, resultando un producto más acabado, con el que quedarás satisfecho.
Siempre tendrás la alternativa de utilizar algún programas WYSIWTG (Muestran dos pantallas en una el código y en la otra el resultado), pero lo realmente importante es aprender los elementos básicos del HTML que ningún software de estos te va a enseñar.
Como crear tu primera página web, método paso por paso
Para comenzar sigue los siguientes pasos:
➔ Crea en el Escritorio una carpeta llamada sitio y en ella crea un nuevo documento de texto, renómbralo a index.html, asegúrate de que no tenga la extensión de archivo .txt, (supongo que tienes desactivado en el Panel de Control -> Opciones de Carpeta -> Ocultar las extensiones de archivo), si no te será imposible.
➔ Arrastra el archivo creado index.html encima del Bloc de notas y suéltalo, en el pegarás el código que se muestra en esta página a continuación.
Cada vez que pegues algo nuevo, guarda los cambios y ejecuta (dos clics) el archivo, que se abrirá con tu navegador instalado, de esa manera podrás comprobar como se ve tu página.
➔ Copia y pega el siguiente código:
<html> <head> <title>Mi Primera Pagina</title> </head> <body> Esta es mi primera página web </body> </html>
Ya tienes tu primera página web.
Que significa el código anterior
Ahora una explicación básica, cada elemento que va entre los signos < y > es un tag o etiqueta, donde quiera que hay un tag algo sucederá en la representación del documento, algunas veces visualmente y otras de manera oculta.
La etiqueta <
html> le indica a tu navegador que tu documento es formato html y debe ejecutarlo como tal.Los dos etiquetas <
title> encierran el titulo de tu pagina, es imprescindible su utilizacion, en el espacio comprendido entre las dos <head> que es la cabeza propiamente dicha del documento, ahí van los datos que el usuario no ve, pero contienen información para el funcionamiento de la pagina.En el espacio entre los dos <
body> es donde insertas todo el contenido que quieres visualizar.Agregarle un título o encabezado a la página web
Ahora vamos a agregarle un titulo en letras grandes y un subtitulo, copia y pega por supuesto en la siguiente línea después del <
body>:<h1>Mi Página</h1> <h3>Esta es mi primera página web.</h3>
Agregarle una imagen a la página web
Ahora insertas una imagen que copiaste previamente en tu carpeta sitio y la renombraste imagen.jpg:
<img src="imagen.jpg" id="imagen" alt="Esta es mi casa"/>
Agregarle un link o vínculo a un sitio web
Ahora un vínculo que te llevara a Google o el lugar que especifiques, ponlo en la parte del <
body> que gustes:<a href="http://www.google.com/">Para ir a Google</a>
Agregar texto o contenido al cuerpo de la página
Ahora le toca el texto con el contenido de la pagina (con el tag <
p> le estas indicando que es un párrafo):<p>Aqui todo lo que quieras escribir.</p>
Despues una pequeña lista de menú con vínculos a otras páginas que crearás después en tu sitio:
<ul> <li><a href="página1.html">Otra pagina</a></li> <li><a href="página2.html">Otra mas</a></li> <li><a href="about.html">Acerca de mi</a></li> </ul>
Darle el estilo final a la página
Ahora finalmente insertaremos un tag en el interior del <
head> para insertar el código css. Que es css? Cascading Style Sheets (Hojas de estilo en cascada), es un mecanismo para añadir y configurar distintos tipos de estilo en las páginas web: colores, fuente, espaciamiento, etc. Puedes leer este Tutorial CSS, un pequeño tutorial básico.
<style>
body {
background: skyblue; /* el fondo de todo el cuerpo*/
font-size: 20px; /*tamaño de la fuente en pixeles*/
color: black; /*color de las letras*/
padding: 20px; /*el espacio entre el borde y su contenido*/
border: 6px solid white; /*tamaño, forma y color del borde de artículo*/
}
h1 {
color: red;
}
</style>
Ya está casi lista la pagina solamente pegaremos el
DOCTYPE al comienzo para que sea compatible con todos los navegadores: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
El tag <
br> que inserté bajo el vínculo de la imagen es simplemente un salto de línea. El código del estilo que está en el head es formato css, esto: /* el fondo de todo el cuerpo*/, significa que es un comentario para que entiendas la configuración, y puedes ir cambiando manualmente los valores y ver el efecto en tu navegador.Rectifica el código que hemos empleado, en resumen quedaría todo así:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>Mi Primera Pagina</title>
<style>
body {
background: skyblue; /* el fondo de todo el cuerpo*/
font-size: 20px; /*tamaño de la fuente en pixeles*/
color: black; /*color de las letras*/
padding: 20px; /*el espacio entre el borde y su contenido*/
border: 6px solid white; /*tamaño, forma y color del borde de artículo*/
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Mi Página</h1>
<h3>Esta es mi primera página web.</h3>
<img src="imagen.jpg" id="imagen" alt="Esta es mi casa"/>
<br/>
<a href="http://www.google.com/">Para ir a Google</a>
<p>Esta es una página web sencilla, pequeña, casi está vacia, pero bonita porque es mi primera página web.</p>
<ul>
<li><a href="página1.html">Otra pagina</a></li>
<li><a href="página2.html">Otra mas</a></li>
<li><a href="about.html">Acerca de mi</a></li>
</ul>
</body>
</html>
Ver el resultado de la página creada
En el siguiente vínculo puedes ver el resultado final de tu página si seguiste todos los pasos, el prototipo creado deberá mostrarse exactamente igual en tu equipo.
Puedes agregar y modificar los elementos que quieras, siempre salvando y visualizando en cada paso. Si te equivocas utiliza las teclas Control Z o Deshacer, hasta que quedes satisfecho con el resultado.
¿Cuál es el próximo paso?
Lo creado hasta este momento es una página web elemental, deberás irle agregando sucesivamente imágenes y más texto, separando cada sección con encabezados.
Después crea otras páginas de forma similar y enlaza cada una de ellas mediante los vínculos. El resultado será un pequeño sitio web contenido en la carpeta sitio, donde la primera página creada, llamada index es su página principal.
Es solo el comienzo, des pues que todo funcione perfectamente entonces accede a la página: Como crear páginas web usando plantillas prediseñadas, para que hagas una página con un estilo más profesional.
También conocerás como subir las páginas así creadas a internet.
Herramientas para la edición y creación de páginas web
Editor para código Javascript y HTML
Herramienta muy útil que puedes utilizar para la edición y creación de código HTML en páginas web. Al dar clic en el vínculo se abre una pequeña ventana en la esquina superior izquierda por lo que no te roba mucho espacio, pega en ella el código que sea y al seleccionar Ver, se abrirá otra ventana mostrando el resultado.
Editor para código HTMLPlantilla básica con formato HTML
También te será útil esta pequeña plantilla que tiene el código HTML básico, ideal para pruebas, se abre en una nueva ventana en la que puedes introducir el código y luego guardar el resultado como página web.
Plantilla básica con formato HTMLComo editar y transformar a tu gusto cualquier página web
Para editar y transformar de forma sencilla sin ningun editor cualquier página web, por ejemplo esta misma en la que estas, haz clic en el siguiente Bookmarklet Editar Página., ahora con el ratón selecciona cualquier texto en la página que quieras reemplazar, pega en la selección o escribe lo que te interese, verás los cambios, así mismo puedes transformas toda su apariencia, cuando termines guárdala y tendrás una copia personalizada.
Puedes hacerlo con cualquier otra, si te interesó el método arrastra el Bookmarklet a tu barra de marcadores para utilizarlo con otra página.
Crear una página web solo con un clic derecho del mouse
Método con el que puedes crear una página web sencilla, descarga la clave del registro en el link mas abajo, descomprímela, da dos clic en ella y agrégala a tu registro, ahora al dar un clic derecho en cualquier carpeta en que estés tendrás en el menú Nuevo la opción: Nuevo documento html.
Crea el nuevo archivo, abre el Bloc de notas y arrastra el documento que creaste a él, sustituye los siguientes campos:
Título, Encabezado, texto de la página, el vínculo puedes sustituirlo y cambiar el nombre imagen por la que vayas a insertar. Sin cerrar el Bloc de notas selecciona en el menú: Archivo ->Guardar y dale dos clic al archivo para que puedas ver su apariencia, sigue editando, guardando los cambios y refrescando el navegador hasta que quedes satisfecho. Este método es muy práctico para crear sencillos archivos web.
Descargar clave del registro para crear en el menu contextual Nuevo archivo HTMLPáginas relacionadas.
◄ Como crear una página web de forma sencilla y rápida
◄ Como crear páginas web usando plantillas prediseñadas
◄ Como crear una página web con el estilo de Facebook
◄ Elementos del código HTML. Importancia y uso de los Meta-tags
◄ Usar los estilos CSS en las páginas web.
◄ Tutorial y manual básico de los estilos CSS
◄ Insertar objetos y películas flash o swf en las páginas web
◄ Como crear páginas web usando plantillas prediseñadas
◄ Como crear una página web con el estilo de Facebook
◄ Elementos del código HTML. Importancia y uso de los Meta-tags
◄ Usar los estilos CSS en las páginas web.
◄ Tutorial y manual básico de los estilos CSS
◄ Insertar objetos y películas flash o swf en las páginas web
