Bitácora del Curso de Especialización Aplicación de las TIC al Desempeño Laboral: mayo 2015

Creación de Páginas Web

Objetivo:

Aprender a crear páginas web desde el inicio, de forma práctica, conociendo los estandares y las mejores prácticas para realizar esta tarea

A continuación se comparte la estructura básica de como elaborar una pagina web, facilitada por el catedrática.

Estructura básica html

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:

<oltype=”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:

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

<imgsrc="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:

<imgsrc="folder/imagenHTML.jpg"

La etiqueta <img> tiene varias propiedades como son:

border, width, height, alt

Ejemplo con propiedades de imágen en HTML

<imgsrc="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 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:

<marqueewidth="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.

URL del artículo: http://www.ejemplode.com/17-html/30-ejemplo_de_marquesina_html.html
Leer completo: ejemplos de Marquesina HTML

Ejemplo de Tabla HTML

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.

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>

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:

<imgsrc="imagenHTML.jpg">

<imgsrc="folder/imagenHTML.jpg"

La etiqueta <img> tiene varias propiedas como son:

border, width, height, alt

Ejemplo con propiedades de imágen en HTML

<imgsrc="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.

Cómo abrir una nueva ventana con HTML

Abrir nuevas ventanas o instancias es muy sencillo con html. Para ello sólo debes agregar el atributo "_blank" a un ancla.

Aquí les dejo el ejemplo para abrir nuevas ventanas con HTML.

<a href="http://www.ejemplode.com" target="_blank">Ejemplode</a>

<p>
Este atributo es el causante de que se abra la nueva ventana: target="_blank">
</p>

</body>
</html>

Como Alinear un texto con clases

Las hojas de estilo nos permiten alinear a la izquierda, derecha, centrar y justificar un texto.
Realizar el siguiente Ejemplo:
<html>

<head>

<styletype="text/css">

h1 {text-align: center}

h2 {text-align: left}

h3 {text-align: right}

h4 {text-align: justify}

</style>

</head>

<body>

<h1>Cómo centrar un texto</h1>

<h2>Cómo alinear a la izquierda un texto</h2>

<h3>Cómo alinear a la derecha un texto</h3>

<h4>Cómo justificar un texto</h3>

<h1>Cómo centrar otro texto de tema</h1>

</body>

</html>

Ejemplo de pagina Web utilizando Referencias para vincular una página web con otra.

Debes crer la siguiente paginaHTML la cual nos permitirá vincular otras paginas web con direcciones absolutas y relativas, utilizando la etiqueta <a href="">Vinculo a Mostrar</a>

<html>

<head>

<title>Floramics. Amigos de las flores</title>

</head>

<body>

<center><h1>Bienvenido a Floramics</h1>

<h2>Presentación</h2>

<p> En esta web encontraras informacion sobre la

asociación y nuestra colección de fotografias de

flores.<br><br><br>

Tenemos las fotografías organizadas en diferentes categorias.</p>

<imgsrc="imagenes/flor.jpg" border=0 alt="No se encuentra esta imagen" />

<h2>Contacto</h2>

<p> Si quieres comunicarte con nosotros

visita nuestra página de contacto.   Te esperamos.</p>

<br>

Vincular pagina web.

<ahref="http://www.aulaclic.es">aqui</a>.

Fuente: ejemplos de Liga a Email<br>

<a href="mailto:jimmy.rodriguez@gmail.com">Mandanos un mail</a>

<br>

Vincular pagina web propia.

<a href="prueba.html">aqui</a>.

</center>

</body>

</html>

Formatos de tabla en html

Te has preguntado alguna vez como hacer una forma en HTML bien alineada y ordenada. Pues aquí la respuesta y es muy simple utilizando tablas.
Las tablas permiten alinear en columnas separadas los campos y las etiquetas, sin más preambulos les dejo el código para Ejemplo de Forma en HTML:

<form name="form1" method="post" action="envio.php">
     <table border="0" align="center">
                        <tr>
                          <td height="26"><div align="right" class="style6"><strong>Nombre> </strong></div>
                              <div align="center" class="style1"></div></td>
                          <td width="240"><input name="nombre" type="text" id=" nombre" size="20">
                          </td>
                        </tr>
                        <tr>
                          <td><div align="right" class="style6"><strong>Compañia></strong></div>
                              <div align="center" class="style1"></div></td>
                          <td><input name="empresa" type="text" id="empresa" size="20">
                          </td>
                        </tr>
                        <tr>
                          <td><div align="right" class="style6"><strong>E-mail > </strong></div>
                              <div align="center" class="style1"></div></td>
                          <td><input name="email" type="text" id="email" size="20">
                          </td>
                        </tr>
                        <tr>
                          <td><div align="right" class="style6"><strong>Comentario> </strong></div>
                              <div align="center" class="style1"></div></td>
                          <td><textarea name="comentario" cols="25" wrap="VIRTUAL" id="comentario"></textarea>
                          </td>
                        </tr>
                        <tr>
                          <td> </td>
                          <td><div align="center">
                              <input type="submit" value="Enviar">
                          </div></td>
                        </tr>
                    </table>
     </form>

1.- ¿Qué es un frameset?

Un frameset, conocido en español como conjunto de marcos, es un archivo que sirve para dividir la página en varias ventanas cuadradas debido a que manda a llamar varios archivos html independientes entre sí nombrados frames (marcos).

La ventaja de los frames es que una sección de la página queda constante y no se tiene que cargar cuando se llama a una liga, por lo tanto es ideal para colocar navegadores.

La desventaja es que ocupa un espacio de la página y no se puede quitar.

2.- El tag<frameset>

Se utiliza para definir como dividir la página en frames.

El frameset se define con una cantidad de filas y/o columnas (rows, columns)

3.- El tag<frame>

Define los documentos html a llamar por cada frame.

Ejemplo de frameset:

<framesetcols="100,*">
<framesrc="frame1.htm" name="izquierdo" scrolling="NO" noresize>
<framesrc="frame2.htm"name="principal" scrolling="AUTO" noresize>
</frameset>

Creamos un frameset horizontal que ocupa 100 pixeles de izquierda a derecha de nuestra pantalla. El otro frame ocupa el % restante. De tal forma que nuestro frame principal estará siempre fijo sin importar la resolución o el tamaño de la ventana del navegador

4.- Propiedades del <frameset>

<framesetcols="100,*" frameborder="YES" border="1" framespacing="0" bordercolor="#000033">

frameborder = Define si queremos un borde en nuestro frame (YES, NO)
border = El ancho del borde, si frameborder es igual a YES
framespacing = El espacio que deja en el borde del frame
bordercolor = El color del borde

5.- Propiedades del <frame>

src = El archivo html, asp, php que vamos a llamar.
name = El nombre de la venta que nos servirá de referencia para enviar parámetros con html o JavaScript.

scrolling = Si deseamos que salga la barra de scroll (YES, NO, AUTO) *** Auto es igual a automático, lo calcula el navegador por nosotros.
noresize = Si queremos que el frame no pueda cambiar de tamaño al mover con el mouse

6.- Cómo crear una liga

Una pregunta recurrente es:
***Cuándo creo un botón me abre la ventana en la misma ventana que mi botón***

Esto es muy simple sólo se le debe de decir al botón que ventana utilizar cuando se navega, quedando así.

Donde principal es la ventana más grande donde desplegamos el contenido.

Si sólo usamos 2 frames se puede utilizar este tag después del body para eliminar el target de nuestro a href.

Ejemplo de Frameset y frames:
home.html

<html>
<head>
<title>Ejemplo</title>
</head>

<frameset cols="100,*" framespacing="1" frameborder="yes" border="1"

bordercolor="#000033">
<frame src="frame1" name="izquierdo" scrolling="NO" noresize>
<frame src="frame2" name="principal">
</frameset>
<noframes><body>

</body></noframes>
</html>

izquierdo.html

<html>
<head>
</head>
<body>
Frame Izquierdo
<a href="http://www.yahoo.com" target="principal">Yahoo</a>
</body>
</html>

principal.html

<html>
<head>
</head>
<body>
Frame Principal
</body>
</html>

7.- Tipos de target

Como hemos visto, se puede utilizar como target un nombre que le hemos dado a un frame, sin embargo, existen otros tipos de target que menciono a continuación.

target="_top"
target="_blank"
target="_self"
target="_parent"

_top = quita los marcos
_blank = abre una nueva ventana
_self = pone el documento en la misma ventana (funciona igual si no pones target)
_parent = abre la liga en el frameset padre (si no se tiene un padre, funciona como _top)

8.- Etiquetas para navegadores que no soportan frames

Para los navegadores que no soportan frames se pueden utilizar las etiquetas <noframes> para poner contenido en dicho caso. (esto no afecta a los navegadores que si soportan frames, que son los más usados)