jueves, 28 de mayo de 2015

Creación de Páginas Web


Sitios web



Un sitio web, también llamado sitio de Internet, consiste en un grupo de archivos HTML conectados a través de hipervínculos y almacenados en un servidor web, o sea, un equipo que aloja páginas web y que está conectado a Internet permanentemente. 

¿Por qué tener un sitio web?

Existen muchas motivaciones para tener un sitio web:
  • Necesidad de notoriedad: un sitio web bien promocionado puede ser una buena manera para incrementar la notoriedad de una empresa u organización.
  • Mejorar el reconocimiento: una empresa puede ampliar su popularidad con el público a través de un sitio web institucional o un pequeño sitio web publicitario.
  • Recopilación de datos: Internet presenta una oportunidad fantástica para que las empresas recopilen datos de clientes y atraigan potenciales clientes.
  • Ventas en línea: luego de superar la falta de confianza inicial, los usuarios de Internet hoy en día la consideran un gran medio para comprar ciertos bienes de consumo. Para algunas empresas, un sitio web es una gran herramienta de marketing.
  • Servicio de apoyo al usuario: cada vez más empresas usan Internet para proveer servicios pre y post venta. Un sitio web es una forma económica para que una empresa brinde a los usuarios de Internet la mayor cantidad de información comercial y técnica.




Por lo general los sitios web se dividen en diferentes categorías que dependen de sus objetivos:

  • Los escaparates son sitios web cuyo principal objetivo es promocionar la imagen comercial de una empresa al dar a conocer ejemplos sobre sus productos o servicios.
  • Los sitios web catálogo tienen como objetivo presentar lo que vende una empresa.
  • Los sitios web informativos son sitios que suministran un tipo de información en particular a un tipo de usuarios de Internet en especial.
  • Los sitios web comerciales son sitios que venden a los usuarios de Internet productos de forma directa. Algunos de estos sitios permiten a los compradores pagar en línea.
  • Un sitio web institucional es un sitio que presenta a una organización y sus valores. Generalmente este tipo de sitio web describe las actividades y datos clave de una organización y suministra a los clientes o beneficiarios la información necesaria.
  • Los sitios web personales son sitios creados por individuos y normalmente están dedicados a actividades recreativas, deportes o temas favoritos de una persona.
  • Los sitios web comunitarios son sitios que reúnen a usuarios con intereses en común.
  • Los sitios web de Intranet son sitios web accesibles dentro de una empresa u oficina que se usan para intercambiar información profesional.



No es necesario estar conectado a Internet para crear un sitio web porque primero hay que crear el archivo HTML y las imágenes.
Sin embargo, una vez que el sitio web está listo para ser visitado debe "salir a la luz", es decir, los archivos deben transferirse (copiarse) desde su equipo al servidor.
Para eso hay que conectarse a Internet y luego enviar las páginas al servidor a través de un cliente FTP (protocolo de transferencia de archivos). 

Estructura básica html

esta se puede trabajar en block de notas 



Un documento en HTMl debería tener esta estructura básica, y, a partir de este se podrá generar la maqueta de elementos para formar nuestro diseño en HTML, ya sea mediante el uso de tablas o con el uso de DIVs y con código CSS posicionar y dar formato a estos, el código es el siguiente:

<html> 
   <head>
      <title>
      </title> 
   </head> 
   <body>
   </body>
</html>


Donde

<html> Indica el inicio del documento.
<head> Inicio de la cabecera.
<title> Inicio del título del documento.
</title> Final del título del documento.
</head> Final de la cabecera del documento.
<body> Inicio del cuerpo del documento.
</body> Final del cuerpo del documento.
</html> Final del documento.


Cómo poner el título a un documento HTML

Para poner el título a un documento html, hacemos uso la viñeta  <title> que debe ir colocado dentro del encabezado del documento, es decir, entre los tags <head>.
Aquí el ejemplo:
<html>
<head>
<title>Título de la página, es lo que se despliega en la parte superior izquierda del navegador.</title>
</head>
<body>
<p>Cómo poner el título a un documento HTML</p>
</body>
</html>

listas numeradas en html 

Mediante la etiqueta <ol> podemos generar listas con elementos numerados y ordenar los elementos que queramos y/o necesitemos, pero necesitamos también del uso del tag <li> para cada opción de nuestra lista, para generarlas nos podemos basar en el siguiente código como ejemplo de listas numeradas en HTML:

<ol type=”1” start=”10”>
<li> El Salvador </li>
<li> Guatemala </li>
<li> Honduras </li>
<li> Nicaragua </li>
<li> Costa Rica </li>
<li> Belice</li>
</ol>

Donde type es el tipo de lista que puede ser 1; numéricamente, a; letras minúsculas, 
A ;letras mayúsculas, i; números romanos minúsculas y I; números romanos en mayúsculas, y start es el numero o valor donde comenzara nuestra lista.



Ejemplo de Cómo poner imagen de fondo en HTML

Para poner una imagen de fondo con HTML es necesario agregar el atributo background al tag <body> y hacer referencia a una imagen, tal  como se describe en el siguiente  ejemplo:
<html>
<body background="fondo.jpg">
<h3>Ejemplo de imagen de fondo</h3>
<p>Se pueden utilizar archivos en formato jpg, gif o png. No es recomendable usar otro formato.</p>
<p>Si la imagen es más pequeña que la página, se repetirá en mozaico. .</p>
</body>
</html>



Ejemplo de Cómo colocar imágenes con HTML

Una de las primeras cosas que debemos aprender del HTML es la etiqueta <img> que funciona para colocar imágenes dentro de una página web.

Para poner una imágen utilizamos el siguiente código:
<img src="imagenHTML.jpg">
Donde "imagenHTML.jpg" es la imagen que vamos a colocar. Deberá estar ubicada en el mismo directorio. Si queremos colocar una imagen con HTML en una página que no está colocada dentro del mismo directorio, podemos usar una ruta absoluta:
<img src="folder/imagenHTML.jpg"
La etiqueta <img> tiene varias propiedades como son:
border, width, height, alt
Ejemplo con propiedades de imágen en HTML
<img src="imagenHTML.jpg" border="0" width="10" height="10">
El ancho y alto (width, height) se coloca en pixeles y deben corresponder al tamaño original de la imagen para que no se distorsione.
Los formatos soportados por el navegador  son jpg, gif y png.


Tabla

Las tablas son la manera más sencilla de organizar el contenido en una página web. Nos permiten delimitar de qué lugar a qué lugar deseamos que se muestre el contenido.
Desde mis inicios como diseñador web, me he dado a la tarea en especializarme en el manejo de tablas y siempre las uso, y por supuesto que a mis alumnos les exijo el uso de tablas y les pongo ejercicios muy complicados.
La estructura básica consta de celdas y columnas, como si fuera una hoja de cálculo. Sin embargo, se pueden llegar a combinar filas o columnas. Para este ejemplo de tabla con html utilizaremos la estructura básica:
Ejemplo de tabla en HTML

<table>
<tr>
<td>Celda</td>
<td>Celda</td>
</tr>
<tr>
<td>Celda</td>
<td>Celda</td>
</tr>
</table>
La etiqueta <tr> sirve para cambiar de renglón.
La etiqueta <td> sirve para crear una nueva celda.
Todas las propiedades del HTML aplican a la etiqueta <table>


Ejemplo de marquesina en HTML

La etiqueta <marquee> nos permite generar un texto o imágenes en movimiento, es muy útil para banners rotatorios o resaltar un mensaje dentro de nuestro sitio y así llamar la atención de los visitantes para comunicarles alguna noticia importante, con el siguiente código se logra ese objetivo:

<marquee width="50%" scrolldelay="0">
Ejemplo de marquesina HTML
</marquee>


Donde scrolldelay es el valor de milisegundos que tardara en volver a pasar el texto o imagen.

Cómo colocar imágenes con HTML

Una de las primeras cosas que debemos aprender del HTML es la etiqueta <img> que funciona para colocar imágenes dentro de una página web.
Para poner una imágen utilizamos el siguiente código:
<img src="imagenHTML.jpg">
Donde "imagenHTML.jpg" es la imagen que vamos a colocar. Deberá estar ubicada en el mismo directorio. Si queremos colocar una imagen con HTML en una página que no está colocada dentro del mismo directorio, podemos usar una ruta absoluta:
<img src="folder/imagenHTML.jpg"
La etiqueta <img> tiene varias propiedas como son:
border, width, height, alt
Ejemplo con propiedades de imágen en HTML
<img src="imagenHTML.jpg" border="0" width="10" height="10">
El ancho y alto (width, height) se coloca en pixeles y deben corresponder al tamaño original de la imagen para que no se distorcione.
Los formatos soportados por el explorer son jpg, gif y png.

pagina web basica, da clik.



No hay comentarios.:

Publicar un comentario