viernes, 8 de abril de 2011

crea tu propio sitio en internet

Diseño web fácil. Haz tu primera página web y crea tu propio sitio en internet


Hacer una pagina web
Como diseñar tu propia página web de una manera fácil, aquí aprenderás y conocerás los elementos básicos del código html usado en la edición de las páginas web de una manera básica y practica.
Lo que te propongo es de de una forma sencilla hacer 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 que vas a relacionar.
Mas adelante con lo que aprendas aquí podrás poder comprender el formato de plantillas hechas por profesionales, de las que te adjunto algunas; podrás editarlas y modificarlas a tu gusto, resultando un producto con el que podrás quedar satisfecho.
Siempre tendrás la alternativa de ir utilizando algún programas del estilo WYSIWTG (What You See Is What You Get), pero lo esencial es aprender los elementos básicos que ningún software te va a enseñar.

Como Hacer tu Primera Pagina Web.


Para empezar crea una carpeta llamada sitio y en ella crea un nuevo documento de texto, renómbralo a index.html, asegúrate de quitar 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 es imposible.
Para empezar puedes editar este archivo con el bloc de notas o con Notepad++, de ahora en adelante cada vez que hagas alguna modificación salva los cambio y visualízalo en tu explorador.
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 Significan los Códigos


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.
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>
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"/>
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>
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 crearas 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>
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>

Aquí puedes ver una Vista Previa Vista Previa de cómo quedaría tu página.
Puedes agregar y modificar los elementos que quieras, siempre salvando y visualizando en cada paso y si te equivocas utiliza las teclas Control Z o deshacer hasta que quedes satisfecho con el resultado.

Herramientas para la edición y creación de páginas web.


En la siguiente página puedes acceder a un Editor web online para hacer de manera sencilla y fácil tu primera página web. Para utilizarlo no es necesario ningún conocimiento de diseño web ni de computación. Trae incluidas imágenes que puedes utilizar en tu página. Su nombre es Whizzywig, es un editor WYSIWYG, que son las siglas en español de "Lo que ves es lo que obtienes", está diseñado para no tener que utilizar el código HTML en la creación de cualquier página web y queda validada automáticamente en XHTML.

Editor web WYSIWYG para hacer de forma sencilla y fácil páginas web Editor web WYSIWYG para hacer de forma sencilla y fácil 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 Javascript y HTML Editor para código HTML


Plantilla 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 HTML Plantilla básica con formato HTML


Como 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.


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 nuevo archivo HTMLDescargar clave del registro para crear en el menu contextual Nuevo archivo HTML



Otros artículos relacionados que puedes leer son:

Elementos del código HTML. Importancia y uso de los Meta-tags Elementos del código HTML. Importancia y uso de los Meta-tags

Usar los estilos CSS en las páginas web. Usar los estilos CSS en las páginas web.

Tutorial y manual básico de los estilos CSS Tutorial y manual básico de los estilos CSS

Como insertar códigos javaScript en las páginas web, ejemplos Como insertar códigos javaScript en las páginas web, ejemplos

Insertar objetos y películas flash o swf en las páginas web Insertar objetos y películas flash o swf en las páginas web

Editar y usar plantillas de paginas web, validar y publicar tu página en internet Editar y usar plantillas de paginas web, validar y publicar tu página en internet

Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)