lunes, 24 de noviembre de 2014


ESTRUCTURA DE UN SITIO WEB

Antes de empezar a diseñar el sitio Web hay que organizarlo y para ello hay que tener claro cuál va a ser el propósito del sitio Web, sus contenidos y la audiencia potencial de la que dispondrá. Lo que va a determinar la estructura de la Web van a ser en gran medida los contenidos; ellos nos deben indicar cual de los siguientes tipos de estructura es el más adecuado:

Estructura en Red

Las páginas del sitio también pueden estar totalmente interconectadas, es decir, desde cada página podemos ir a cualquier otra del sitio. Realmente la interconexión de absolutamente todas las páginas sería un caso real. Es una estructura de apariencia algo anárquica en la que hay que cuidar mucho de no dejar enlaces abiertos, es decir, apuntando a una página inexistente. Además debemos evitar que el usuario se pierda entre los enlaces. Por todo esto ello es necesario planificarla muy bien.


Fuente: http://roble.pntic.mec.es/jprp0006/tecnologia/4eso_informatica/kompozer/introduccion/estructura_sitio.htm

lunes, 17 de noviembre de 2014

Sitio Web


SITIO WEB

Sitio es un lugar que sirve para algo o un espacio ocupado (o que puede llegar a serlo). La noción de Web, por su parte, hace referencia a Internet, una red de redes que permite la interconexión de computadoras mediante un conjunto de protocolos denominado TCP/IP.

Un sitio web, por lo tanto, es un espacio virtual en Internet. Se trata de un conjunto de páginas web que son accesibles desde un mismo dominio o subdominio de la World Wide Web (WWW).

Los sitios web incluyen documentos HTML, fotografías, sonidos, vídeos, animaciones Flash y otro tipo de contenidos que pueden compartirse en línea. La URL raíz del sitio web se conoce como portada o homepage. Lo más habitual es que esta portada facilite el acceso a todas las páginas del sitio mediante hipervínculos (también conocidos como enlaces o links).


Diferencia entre sitio web y página web

A veces se utiliza erróneamente el término página web para referirse a sitio web. Una página web es parte de un sitio web y es un único archivo con un nombre de archivo asignado, mientras que un sitio web es un conjunto de archivos llamados páginas web. 1

FUENTE: Definición de sitio web - http://definicion.de/sitio-web/#ixzz3JLWxBD9L
______________________________
1 http://www.masadelante.com/faqs/sitio-web

lunes, 20 de octubre de 2014

Estructura de una Maquetación con tablas.

MAQUETACIÓN

Para realizar el diseño de una página web la podemos realizar mediante la maquetación, esto consiste en la creación de tablas para generar los espacios donde se colocarán los contenidos. En la maquetación con tablas se anidan tablas, colocando unas dentro de otras para conseguir realizar diseños de plantilla más complejos.

Diagramando nuestro diseño

El primer paso es diagramar la estructura, el esqueleto de nuestra página por así decirlo, nosotros lo haremos así:
  • Header - Encabezado (donde irá el banner o logo) 
  • Menú - Barra horizontal (acá pondremos los enlaces y demás menús que queramos)
  • Content - Contenido (texto, imágenes, videos, etc)
  • Footer - Pie de página (créditos, copyrigth)
teniendo la idea de la estructura podemos comenzar a escribir nuestro código.




Atributos:
Border: Permite colocar un borde de diferentes tamaño a la tabla.
Bordercolor: Permite dar un color al borde de la tabla.
Cellpadding: Permite colocar una sangría al texto insertado en las celdas de la tabla.
Cellspacing: Permite colocar espacio entre las líneas de las tablas.
Colspan: Permite agrupar las celdas o columnas de una tabla. (combinación de celdas)
Rowspan: Permite agrupar las filas de una tabla. (combinación de celdas)
Valign: Permite alinear un texto en forma vertical "Top (superior)" y "Bottom (inferior)".
Width: Ancho de la tabla.
Height: Alto de la tabla.

Fuente: www.aulaclic.es

lunes, 13 de octubre de 2014

Maquetación

Maquetación Con Tablas
Las tablas son una de las herramientas más útiles que disponemos en HTML, ya que nos van a permitir en cierto modo "maquetar" nuestro documento, ayudándonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la única forma coherente que había antes de la introducción de las Hojas de Estilo y de las etiquetas.

Etiquetas básicas para una maquetación
Para crear una tabla <table> y </table>.
Por cada una de las filas de la tabla, etiquetas <tr> y </tr>.
Por cada celda dentro de cada fila, etiquetas <td> y </td>.
Es posible modificar los siguientes atributos de una tabla:


Por ejemplo:

<table width="100%" border="2" align="center" cellspacing="0" cellpading="0" bordercolor="#000000" bgcolor="#FFCC99">
  ...

</table> 

Para la etiqueta <td> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.

A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.

Fuente: www.aulaclic.es

Codigo de una maquetación

<!Doctype html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body background="" bgcolor="" text="" link="" vlink="" alink="">
<!-- wrap -->
<table border="1" bordercolor="" align="center" cellpading="0" cellspacing="0" width=100%>

<!-- header -->
<tr bgcolor="" align="center" height="128px">
<td colspan=""> </td>
</tr>
<!-- menu -->
<tr bgcolor="" align="center">
<td width="%">menu1</td>

<td width="%">menu2</td>
<td width="%">menu3</td>
<td width="%">menu4</td>
</tr>
<!-- content -->
<tr bgcolor="white" align="left" valign="top" height="512px">
<td colspan="">Textos, imágenes, videos, etc </td>
</tr>

<!-- footer -->
<tr bgcolor="" align="center">
<td colspan="">©Todos los derechos reservados - 2014</td>
</tr>
</table>


</body>
</html>




EJEMPLO



lunes, 8 de septiembre de 2014

Tablas

Tablas en HTML
Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.

Esta etiqueta permite insertar una tabla.
<table border="1">
..........
</table.

La etiqueta "<tr> ....</tr>" permite insertar filas dentro de la tabla y la etiqueta "<td> .....</td>" permite insertar columnas o celdas de datos dentro de la tabla:

Ejemplo:


Para insertar una tabla de 2 filas y 3 columnas (2x3) se escribe:

<table border="1">
<tr>
     <td>1era celda</td><td>2da celda</td><td>3era celda</td>
</tr>
<tr>
     <td>4ta celda</td><td>5ta celda</td><td>6ta celda</td>
</tr>
</table>



Formato de la Tabla
    Es posible modificar los siguientes atributos de una tabla:
Atributo
Significado
Posibles valores
width
ancho de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
height
altura de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
cellpadding
espacio entre el contenido de las celdas y el borde
un número
cellspacing
espacio entre celdas
un número
border
grosor del borde
un número
align
alineación de la tabla dentro de la página
left (izquierda)
right (derecha)
center (centro)
bgcolor
color de fondo
número hexadecimal
background
imagen de fondo
número hexadecimal
bordercolor
color del borde
número hexadecimal

Formato de la celda
    Es posible modificar los siguientes atributos de una celda:
Atributo
Significado
Posibles valores
width
ancho de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
height
altura de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
align
alineación horizontal del contenido de la celda
left (izquierda)
right (derecha)
center (centro)
valign
alineación vertical del contenido de la celda
baseline (línea de base)
bottom (inferior)
middle (medio)
top (superior)
bgcolor
color de fondo
número hexadecimal
background
imagen de fondo
número hexadecimal
bordercolor
color del borde
número hexadecimal



Fuente: www.aulaclic.es

lunes, 25 de agosto de 2014

Enlaces o Links

Enlaces o Links (Hipervínculos)

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva a una página o a un archivo.
Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>.
A través del atributo "href" se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace:
Ir a IPAC
Habría que escribir:
<a href="http://www.ipac.edu.ec">Ir a IPAC</a>

Referencia al documento (interno):
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual.
Por ejemplo, teniendo en cuenta que el documento pagina.html se encuentra dentro de la misma carpeta que el documento actual, para insertar el enlace:
Inicio
Habría que escribir:
<a href="pagina.html">Inicio</a>

Referencia fuera del documento (externo):
Conduce a una página externa situado fuera del documento actual, generalmente se crea el enlace a direcciones web de paginas subidas en internet en un servidor web.
Por ejemplo, teniendo en cuenta que nos queremos enlazar con la pagina deGOOGLE que se encuentra fuera del documento actual, para insertar el enlace:
Ir a Google
Habría que escribir:
<a href="http://www.google.com.ec">Ir a Google</a>

Referencia a un correo electrónico (email):
Conduce a una aplicación externa que permite enviar correo electrónico a una dirección específica en internet subido en un servidor correo web.
Por ejemplo, teniendo en cuenta que queremos enviar un correo a una persona en particular o que nos envien información a nuestro email, para insertar el enlace:
Correo
Habría que escribir:
<a href="mailto:gfarino@ipac.edu.ec">Correo</a>

Destino del enlace:
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores:
-blank_
Abre el documento vinculado en una ventana nueva del navegador.
-self_
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

Además, podemos cambiar el color de los enlaces cuando estos esten activos (alink), visitados (vlink) o el propio color del enlace (link).; estos atributos van dentro de la etiqueta body.

Ejemplo:
<body link="#ffff00" vlink="#000080" alink="#ff0000">

Listas en HTML

Elemento de lista <li>
Cada uno de los elementos de una lista se insertan entre las etiquetas <li> y </li>.
Por ejemplo, para insertar en una lista los siguientes elementos:
Perro
Gato
Periquito

Habría que escribir:
...
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
...
Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada (con viñetas) u ordenada (numerada).


Lista desordenada <ul>

Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>.

A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado).

Por ejemplo, para insertar la siquiente lista:

  • Perro
  • Gato
  • Periquito
Habría que escribir:

<ul type="disc">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>

Lista ordenada <ol>

Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>.

A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas).

Por ejemplo, para insertar la siquiente lista:
  1. Perro
  2. Gato
  3. Periquito
Habría que escribir:

<ol type="1">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ol>

Anidar listas
Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas.
Por ejemplo, para insertar la siguiente lista:
  1. Lunes
    • Ingles
    • Frances
  2. Martes
    1. Ingles
      1. Correccion de ejercicios
      2. Proponer ejercicios
Habría que escribir:
<ol type="1">
<li>Lunes</li>
   <ul type="square">
   <li>Ingles</li>
   <li>Frances</li>
   </ul>
<li>Martes</li>
   <ol type="1">
   <li>Ingles</li>
      <ol type="A">
      <li>Correccion de ejercicios</li>
      <li>Proponer ejercicios </li>
      </ol>
  </ol>
</ol>


Fuente: www.aulaclic.es

Textos animados

Etiqueta Marquesina
<marquee> </marquee>
ejemplo de la marquesina


La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra página Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio "<marquee>" y su cierre "</marquee>".
El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable gracias a los siguientes atributos:

align: Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").

bgcolor: Con este atributo definiremos el color de fondo que le queremos dar a la marquesina donde está el texto en movimiento.

height y width: El primero marca la altura que tendrá la marquesina y el segundo la anchura de la misma.

direction: Sirve para definir la dirección del movimiento: "left" para la izquierda, "right" para la derecha, "up" para arriba y "down" para abajo.

behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos este atributo, el texto se moverá de forma circular en el sentido que le hayamos marcado.
Con behavior="slide" haremos que el texto se detenga al llegar al final de la marquesina. Y con el behavior="alternate" el texto irá y volverá de un lado a otro de la marquesina.

Fuente: www.aulaclic.es

Imágenes - HTML

Imágenes
Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades, todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.

<img>
Esta etiqueta permite colocar una imagen en el contenido de la página Web.  Dicha etiqueta no necesita etiqueta de cierre y el nombre de la imagen ha de especificarse a través del atributo "src".

Por ejemplo, para insertar la siguiente imagen:


Se escribe así:
<img src="ipac.jpg">

Teniendo en cuentra que la imagen se llama ipac.jpg y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento).

Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc.; Además se puede utilizar la ruta absoluta de una imagen que es la dirrección web de la misma. 

Ejemplo:
<img src="http://www.direccion.com./Images.jpg">

Atributos y propiedades

BORDER
El atributo "border" puede tomar valores numéricos, que indican el grosor en píxeles del borde.

TAMAÑO DE LA IMAGEN
A través de los atributos "width" (anchura) y "height" (altura) puede modificarse el tamaño de la imagen. El valor que pueden tomar los atributos" width y height" ha de ser un número.
Ejemplo:
<img src="imagenes/ipac.jpg" width=200 height=80>

ALINEACIÓN DE UNA IMAGEN
La alineación de las imágenes se establece a través del atributo "align". Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran.

Valor
Significado
Ejemplo
bottom
inferior
 Imagen con texto
left
izquierda
Imagen con texto
middle
medio
 Imagen con texto
right
derecha
Imagen con texto
top
superior
 Imagen con texto

Fuente: www.aulaclic.es

Fuente de textos

Propiedades de textos
Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:


Atributo
Significado
Posibles valores
face
fuente
nombre de la fuente, o fuentes
color
color del texto
número hexadecimal o texto predefinido
size
tamaño del texto
valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor


Por ejemplo, para insertar el texto:
Bienvenidos a computacionipac.blogspot.com
Habría que escribir:
<font color="magenta" size=4 face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a computacionipac.blogspot.com</font>
Fuente: www.aulaclic.es 

Etiquetas para formatos de textos

Centrar todo
<center> .....</center>
Esta etiqueta permite centrar todo lo que se coloque entre ellas como: texto, imágenes, encabezados, etc.

Estilos para los textos (negrita, cursiva y subrayado)
1. Negrita
Html 4                            Html 5
<b> ....</b> o <strong> ..... </strong>
2. Cursiva
    Html 4               Html 5
<i> .....</i> o <em> .....</em>
3. Subrayado
    Html 4             Html 5
<u> ....</u> o <ins> </ins>
Ejemplo:
<p align="justify">Aqui se escribe el <strong>texto</strong> que se quiere <em>mostrar</m> en el contenido de la <ins>página web</ins></p>


A continuación se muestran algunas etiquetas asociadas al
Tipo de letra:

Etiqueta
Significado
Ejemplo
<s>
tachado
curso HTML

Tipo de información:

Etiqueta
Significado
Ejemplo
<em>
énfasis
curso HTML
<ins>
insertado
curso HTML
<strong>
destacado
curso HTML
<sub>
subíndice
curso HTML
<sup>
superíndice
curso HTML


Fuente: www.aulaclic.es