
Ir al contenido Ir a la navegación Ir al buscador

English Directorio WAP para móvil, Tablet, iPhone o Smartphone Centro de Noticias de la Universidad de Oriente Categorías

Inicio | Contacto | Posts |

TIENDA PUBLISHOP | Sobre nosotros | Registro y Planes | Pagos | Donaciones

Ver Código QR de esta página

Campaña #AyudemosaYuli | Campaña #AyudemosaStephany. | ¿Interesado(a) en cursos y resolución de ejercicios de materias prácticas? Para más información, contáctenos por: Teléfono: +58 (412) - 8226575. WhatsApp y Telegram: +58 (426) - 6836955 o escriba al correo: [email protected]. Únete al grupo: SISTEMAS (UDOMO).

[»]

Musica para tu celular

Buscar en BolUDO

Como hacer una pagina web fácil

martes junio 28, 2016

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 el primero de una serie de artículos que se publicaron posteriormente en este sitio, que abordan elementos básicos del diseño web y de la publicación en internet.
Todos han sido escritos con un lenguaje fácil de comprender, pensando en 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 quizás las páginas de esta sección, te puedan 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 que se muestra 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 programa 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

1- El código HTML elemental

Para comenzar sigue los siguientes pasos:

➔ Crea en el Escritorio una carpeta llamada sitio y dentro de ella crea un nuevo documento de texto, renómbralo a index.html, asegúrate de que no tenga la extensión de archivo .txt.
Se supone 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.
Una sencilla explicación del código anterior.
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 una página web y debe representarla como tal.
• Las etiquetas <title> encierran el título de la página, es imprescindible su uso, se muestra en la barra superior del navegador.
• Los elementos que se encuentran entre las dos etiquetas <head> que es el encabezado, contiene datos e información para el funcionamiento la página, que el usuario no ve.
• En el espacio comprendido entre las etiquetas <body> es el que contiene todo el contenido que quieres visualizar.

2- 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>

3- 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" alt="Esta es mi casa">

4- 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>

5- 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>

6- Agregar el estilo CSS a la página

El estilo CSS son instrucciones para darle un estilo preciso a cualquiera de los elementos que componen la página. Es posible modificar el tamaño del texto, los colores, el tipo de fuente, como se muestran las imágenes, etc.
Para eso se incluyen algunas líneas encerradas entre dos etiquetas <style>
En este ejemplo se incluyen algunos comentarios (encerrados entre los caracteres /* */ ), solo para que se comprenda que significan los valores y se puedan modificar.
<style>
body{background:#b7e5ff; /*el color del fondo*/
font-size:20px; /*tamaño del texto en pixeles*/
color:black; /*color de las letras*/
padding:20px; /*el espacio entre el borde y el contenido*/
border:6px solid white; /*tamaño, forma y color del borde de la pagina*/
}
h1{color:red;} /*color del encabezado*/
</style>

6- Agregar la declaración

Ya está casi lista la pagina solamente pegaremos el DOCTYPE al comienzo para que sea compatible con todos los navegadores y especificaremos que se debe mostrar en idioma español:
<!DOCTYPE html>
<html lang="es">

La etiqueta <br> indica un salto de línea.

Finalmente rectifica como queda todo el código con lo que hemos agregado:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252">
<title>Mi Primera Pagina</title>
<style>
body{background:#b7e5ff;
font-size:20px;
color:black;
padding:20px;
border:6px solid white;}
h1{color:red;}
</style>
</head>

<body>
<h1>Mi Página</h1>
<h3>Esta es mi primera página web</h3>
<img src="imagen.jpg" alt="Esta es mi casa">
<br>
<a href="http://www.google.com/">Link 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

La siguiente imagen es una miniatura de la página creada con el código anterior, da un clic en ella para verla a tamaño completo en el navegador

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.

Agregar más elementos a la página web creada

Lo creado hasta este punto es una página web elemental, deberás irle agregando sucesivamente imágenes, más texto y vínculos.
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.

Las etiquetas más utilizadas en el código HTML

HTML es el lenguaje con el que se escriben las páginas web, los navegadores están programados para traducir las etiquetas y así mostrar solo el contenido, con el formato necesario.
Las siguientes son algunas de las etiquetas más utilizadas, la mayoría no las utilizamos en el código anterior, pero es necesario conocerlas para poder interpretar correctamente el código y comprender la función de cada una de ellas.

Las etiquetas más utilizadas en HTML

<a href="http: //direccion">TEXTO</a> Un vinculo a una dirección web

<b>TEXTO</b> El texto encerrado se mostrará en negrita

<br> Un salto de linea

<div></div> Contenedor o bloque, puede contener texto o cualquier otro elemento

<em>TEXTO</em> El texto encerrado se mostrará en cursiva

<h1>TEXTO</h1> Encierra un encabezado de una sección, desde hi hasta el h6

<hr> Inserta una línea o división

<i>TEXTO</i> El texto encerrado se mostrará en cursiva

<img src="imagen.jpg" alt=""> inserta una imagen

<input> Inserta una forma o control

<input type="text"> Entrada de texto

<input type="button"> Botón

<input type="checkbox"> Casilla

<ol></ol> Lista ordenada, <ul></ul> Una lista desordenada

<p> TEXTO</p> Inserta un párrafo

<pre>TEXTO O CODlGO</pre> Muestra el texto pre-formateado

<span></span> Permite dar estructura al contenido

<table></table> Inserta una tabla con las lineas y columnas que especifiquen

<textarea>TEXTO</textarea> inserta un cuadro de texto

Editor web online para generar código HTML

Puedes auxiliarte del siguiente editor en esta página para crear con más facilidad el código HTML necesario.
Solo introduce el texto y dale formato, crea los vínculos, incluso inserta imágenes.
Posteriormente solo tienes que usar el botón HTML para que se muestre el código fuente. Este lo puedes copiar y pegar en tu página.

Herramientas auxiliares 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 el botón "Ver", se abrirá otra ventana mostrando el resultado.

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.

<html>
<head>
<title>New</title>

<script type="text/javascript">

</script

</head>
<body>

<script type="text/javascript">

</script

</body>
</html>

Bookmarklet para editar y transformar 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 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.

— @bolUDOoficial

Categorías: #Web, #

[0] Atrás | Directorio

Inicio

Apps Infoudo ¡Descarga el icono directo en el menú de tu equipo!

[»] Las mejores Apps para tu celular

[»] Imágenes Gratis

Comenta o lee lo que otros opinan

COMPÁRTELO:

Indica que te gusta y comparte

Facebook

Twitter

También te puede interesar:

Páginas recientes sobre Windows, internet y la publicación web
Principales redes y servicios de afiliados de internet en español
Los mejores directorios y agregadores de blogs en español
Lista de directorios de artículos de internet
Donde publicar contenido en internet, los directorios de artículos
Como aumentar las visitas y popularidad de un blog, página o sitio web en internet
Como publicar, escribir, subir artículos y contenido a internet
Como crear un logo y un favicon para un blog o sitio web
Como crear un Sitemap o Mapa del sitio para un blog o sitio web
Obtener más ingresos con la publicidad de AdSense, consejos y trucos

Ver Todas Las Páginas Relacionadas

« Lista de servicios y productos gratis de Google en internet | Como crear un sitemap o mapa del sitio para usar en un sitio web »

Buscador:

Síguenos por RSS

Puedes leerlos mediante el navegador Firefox, lectores de noticias en la computadora o el móvil o usando el servicio de Feedburner de Google para recibir las notificaciones por correo electrónico.