Desarrollo de tesis

Sistemas de Concursos

Capítulo 1. Internet


HTML y más allá

El lenguaje Marcado de Hipertexto (HTML, Hypertext Markup Language) es un subconjunto o derivado el Lenguaje Estándar de Marcado Generalizado (SGML, Standard Generalizad Markup Language), se basa en usar etiquetas de código incrustadas, para describir todos los elementos de un documento o programa particular.

Los Orígenes de HTML

HTML no incluye todos los elementos de SGML; en realidad es mucho más sencillo, este tiene otra característica significativa: la capacidad de usar hipertexto.

Ejemplo de Código de una página HTML

Como se ve en el navegador

Cuando se introdujo HTML por primera vez, contaba relativamente con pocas etiquetas, la primera versión tenia apenas unas 30 etiquetas para definir los documentos.

Entre las etiquetas que podíamos encontrarnos <TITLE> para el título de la página, <UL> para poder hacer listas ordenadas de términos, o los enlaces que nos permitían la navegación entre diferentes documentos.

Esta versión no llegó a aparecer como tal y no se realizó ninguna RFQ (Request For Quotation), que es un documento donde se manda la especificación de lo que se desea hacer, una aplicación, un protocolo o un algoritmo para que todo el mundo lo lea y añada, modifique o siguiera cosas que le pueden parecer interesantes.

En la siguiente versión, la 2.0, el número de etiquetas aumentó, siendo posible incluir una imagen dentro de un documento con la etiqueta IMG. En este momento empezaron a aparecer etiquetas relacionadas con la presentación del texto como <B> o <I> las cuales dibujaban un texto en negrita o itálica. También entraron a formar parte de la especificación los formularios <FORM>, con la posibilidad de poder realizar operaciones en el servidor Web desde nuestro navegador.

Fue ya en la versión 3.2 cuando se produjo el mayor número de mejoras en la especificación de HTML. Aparecieron las tablas <TABLE>, la etiqueta <FONT> que nos permitía modificar el tipo de letra, tamaño y color de nuestros textos. En esta versión se empezaron a permitir los applets que son pequeños programas escritos en Java que eran ejecutados dentro del navegador, así como también la ejecución de scripts, que eran trozos de código ejecutados del lado del cliente.

Así llega la actual versión 4.01 de HTML, que como principal mejora ha introducido las hojas de estilo. Estas nos permiten definir fuentes, tamaños, forma, colores, de una manera global para que así la presentación en todos nuestros documentos sea la misma sin necesidad de tener que incluir la etiqueta <FONT> continuamente y en caso de que sea necesario un cambio, solo tengamos que realizarlo en un sitio.

A partir de esta versión, y debido a la posibilidad de incluir cualquier tipo de archivo en nuestra página, el contenido multimedia va incrementándose cada vez más, ya es posible introducir un stream de video, reproducir una canción mientras navegamos una Web o incluir animaciones en Flash. En el lado del servidor la tecnología también ha ido avanzando poco a poco para facilitar la vida a los desarrolladores. En los primeros momentos, cuando se quería manejar un formulario, se tenia que hacer uso de de los Common Gateway Interface (CGI). Esta interfase permite pasar información del usuario al servidor Web, de esta a una aplicación y posteriormente devolver la respuesta de la aplicación al servidor y de nuevo al cliente.

Poner el dibujo de la pagina 344

El siguiente paso fueron los módulos que se ejecutaban dentro del servidor Web, así aparecieron dentro del servidor Web, así aparecieron lenguajes de programación como ASP o PHP. Estos permitían introducir código que se ejecuta en las páginas. Al contrario de lenguajes como Javascript o VBScript, que se ejecutaban en el cliente, una vez, que la pagina había sido descargada, estos nuevos lenguajes era ejecutados por el servidor Web siendo una pagina HTML de resultado lo que era enviado al cliente.

La última tecnología en aparecer son los Web Services. Un Web Service es simplemente un componente, trozo de código o aplicación que esta instalado en un servidor Web y el cual es capaz de intercambiar datos o información con otro Web Service alojado en una maquina distinta. El uso de Web Services aumenta la fiabilidad de nuestras aplicaciones, la tolerancia a fallos y su rendimiento.

SGML

SGML en ocasiones queda opacado por HTML. Hoy en día se sigue utilizando. Se emplea con frecuencia en documentos que utilizan máquinas de búsqueda poderosas y sistemas de manipulación de texto, se asocia con catálogos grandes, diccionarios y enciclopedias digitales.

El navegador define el estilo

La composición de texto, los gráficos y los elementos multimedia son resultado tanto del navegador y de la plataforma como del código HTML en sí. La plataforma y el navegador pueden efectuar drásticamente lo que se compone y se ve la pantalla de la computadora.

Editores

Actualmente hay muchas formas de crear documentos HTML. Debido a que los archivos HTML son textos en ASCII sencillo, puede usar cualquier editor de texto ASCII para generar archivos HTML, como el WordPad o el Bloc de Notas.

En este momento existen varias herramientas comerciales que permiten crear documentos Web como el Microsoft Frontpage, Dreamweaver, Adobe Page Maker, entre otros, facilitando al usuario crear este tipo de documentos sin ser un experto en HTML.

Etiquetas y atributos

El lenguaje HTML usa palabras primarias de código para definir los diferentes elementos dentro de un documento. Estas palabras primarias se llaman etiquetas. Además, cada etiqueta puede tener sus propios valores o parámetros, a los cuales se les llama atributos. Para identificar las etiquetas en el código HTML con los paréntesis angulares (<>) que las encierran, casi siempre las etiquetas HTML aparecen en pares, como <H1>…</H1>.

Las etiquetas y los atributos no distinguen entre mayúsculas o minúsculas, por lo que no importa la forma en que las escriba, siempre y cuando sea uniforme, ejemplo:

<H1 ALIGN=”LEFT”> HOLA MUNDO </H1>

<H1> Es la etiqueta

<H1 ALIGN=”LEFT”> La alineación a la izquierda es el atributo de la etiqueta.

Las etiquetas son las palabras de código principales o primarias de HTML; los atributos son valores o parámetros opcionales de esas etiquetas.

A continuación se presentan algunas de las etiquetas más importantes de HTML.
 

Etiqueta

Nombre

Codigo de ejemplo

Vista en el navegador

<!--

Comentario

<!—Esta podra ser visto en la alguna parte del dcumento HTML-->

No se mostrara nada en la pagina

<A -

Liga

< A href=”http://www.tupagina.com”>Visita nuestra pagina</ A >

Visita nuestra pagina

<B>

Negrita

<B> Comentario </B>

Comentario

<BIG>

Texto Grande

<BIG>Comentario</ BIG>

Comentario

<BODY>

Cuerpo del documento

<BODY> El texto de la pagina </BODY>

El texto de la pagina

<BR>

Salto de linea

El texto de la pagina <BR> El texto de la pagina

El texto de la pagina

El texto de la pagina

<CENTER>

Centrado

<CENTER> El texto de la pagina </CENTER>

El texto de la pagina

<DD>

Descripción de Definiciones

<DL>

<DT> Tema

<DD> Definición del Tema

<DT> Tema

<DD> Definición del Tema

</DL>

 

Tema  
  Definición del Tema
Tema  
  Definición del Tema

 

<DL>

Lista de Definiciones

<DL>

<DT> Tema

<DD> Definición del Tema

<DT> Tema

<DD> Definición del Tema

</DL>

 

Tema  
  Definición del Tema
Tema  
  Definición del Tema

 

<DT>

Definiciones de Tema

<DL>

<DT> Tema

<DD> Definición del Tema

<DT> Tema

<DD> Definición del Tema

</DL>

 

Tema  
  Definición del Tema
Tema  
  Definición del Tema

 

<EM>

Énfasis

Esto es un <EM> Ejemplo </EM> para el enfasis

Esto es un Ejemplo para el enfasis

<EMBED>

Incrustacion de objetos

<EMBED src="yourfile.mid" width="100%" height="60" align="center">

<EMBED>

Incrustacion de objetos

<EMBED src ="yourfile.mid" hidden=true autostart=true>

La música empezara a tocarse cuando la pagina se haya descargado, solo se tocara una vez.

<FONT>

Letra

<FONT FACE="Times New Roman">Ejemplo </FONT>

Ejemplo

<FONT>

Letra

<FONT FACE="Times New Roman" SIZE="4"> Ejemplo </FONT>

Ejemplo

<FONT>

Letra

<FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000"> Ejemplo </FONT>

Ejemplo

<FORM>

forma

<FORM action="mailto:nombre@tudominio.com">

Nombre: <INPUT name=" Nombre" value="" size="10"><BR>

Email: <INPUT name="Email" value="" size="10"><BR>

<CENTER><INPUT type="submit"></CENTER>

</FORM>

Nombre:

Email:

<H1>

Cabezera 1

<H1> Ejemplo </H1>

Ejemplo

<H2>

Cabezera 2

<H2> Ejemplo </H2>

Ejemplo

<H3>

Cabezera 3

<H3> Ejemplo </H3>

Ejemplo

<H4>

Cabezera 4

<H4> Ejemplo </H4>

Ejemplo

<H5>

Cabezera 5

<H5> Ejemplo </H5>

Ejemplo

<H6>

Cabezera 6

<H6> Ejemplo </H6>

Ejemplo

<HEAD>

Cabezera Documento

<HEAD> Contiene elementos describiendo el documento </HEAD>

No se mostrara nada en la pagina

<HR>

Linea Horizontal

<HR>


<HR>

Linea Horizontal

<HR WIDTH="50%" SIZE="3">


<HR>

Linea Horizontal

<HR WIDTH="50%" SIZE="3" NOSHADE>


<HR>

(Internet

Explorer)

Linea Horizontal

<HR WIDTH="75%" COLOR="#FF0000" SIZE="4">

<HR>

(Internet

Explorer)

Linea Horizontal

<HR WIDTH="25%" COLOR="#6699FF" SIZE="6">

<HTML>

Lenguaje Marcado de Hipertexto

<HTML>

<HEAD>

<META>

<TITLE>

Titulo

</TITLE>

</HEAD>

<BODY>Contenido pagina

</BODY>

</HTML>

Contenido pagina

<I>

Letra italica

<I> Ejemplo </I>

Ejemplo

<IMG>

Imagen

<IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0" alt="algun parrafo acerca del sitio">

algun parrafo acerca del sitio

<INPUT>

Campo input

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">

<INPUT type="text" size="10" maxlength="30">

<INPUT type="Submit" VALUE="Submit">

</FORM>

<INPUT>

(Internet

Explorer)

Campo input

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">

<INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="10" maxlength="30">

<INPUT type="Submit" VALUE="Submit">

</FORM>

<INPUT>

Campo input

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2">

<TR>

<TD BGCOLOR="#8463FF">

<INPUT type="text" size="10" MAXLENGTH="30">

</TD>

<TD BGCOLOR="#8463FF" VALIGN="Middle">

<INPUT type=image name="submit" src="yourimage.gif">

</TD>

</TR>

</TABLE>

</FORM>

<INPUT>

Campo input

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">

Comentarios:<BR>

<TEXTAREA wrap="virtual" name="Comments" rows=3 cols=20 MAXLENGTH=100></TEXTAREA>

<BR>

<INPUT type="Submit" VALUE="Submit">

<INPUT type="Reset" VALUE="Clear">

</FORM>

Comentarios:

<INPUT>

Campo input

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">

<CENTER>

Seleccione una opcion:

<SELECT>

<OPTION >opcion 1

<OPTION SELECTED>opcion 2

<OPTION>opcion 3

<OPTION>opcion 4

<OPTION>opcion 5

<OPTION>opcion 6

</SELECT>

<BR>

<INPUT type="Submit" VALUE="Submit">

</CENTER>

</FORM>

Seleccione una opcion:

<INPUT>

Campo input

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">

Select an option:

<BR>

<INPUT type="radio" name="option1"> Option 1

<INPUT type="radio" name="option2" CHECKED>

Option 2

<INPUT type="radio" name="option3"> Option 3

<BR>

<BR>

Select an option:<BR>

<INPUT type="checkbox" name="selection1">

Selection 1

<INPUT type="checkbox" name="selection2" CHECKED> Selection 2

<INPUT type="checkbox" name="selection3">

Selection 3

<INPUT type="Submit" VALUE="Submit">

</FORM>

<LI>

Lista

<MENU>

<LI type="disc">Lista item 1

<LI type="circle"> Lista item 2

<LI type="square"> Lista item 3

</MENU>

<OL type="i">

<LI> Lista item 1

<LI> Lista item 2

<LI> Lista item 3

<LI> Lista item 4

</OL>

  • List item 1
  • List item 2
  • List item 3
  1. Lista item 1
  2. Lista item 2
  3. Lista item 3
  4. Lista item 4

<MENU>

Menu

<MENU>

<LI type="disc">Lista item 1

<LI type="circle"> Lista item 2

<LI type="square"> Lista item 3

</MENU>

  • List item 1
  • List item 2
  • List item 3

<MARQUEE>
(Internet
Explorer)

Marquesina

<MARQUEE bgcolor=" #CCCCCC " loop="-1" scrollamount="2" width="100%"> Ejemplo

</MARQUEE>

Ejemplo

<OL>

Lista ordenada

<OL>
<LI> Lista item 1
<LI> Lista item 2
<LI> Lista item 3
<LI> Lista item 4
</OL>

<OL type="a">
<LI> Lista item 1
<LI> Lista item 2
<LI> Lista item 3
<LI> Lista item 4
</OL>

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

<OPTION>

Opciones de lista

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION> option 1
<OPTION SELECTED> option 2
<OPTION> option 3
<OPTION> option 4
<OPTION> option 5
<OPTION> option 6
</SELECT><BR>
</CENTER>
</FORM>

Seleccione una opcion:

<P>

paragrafo

Este ejemplo despliega el uso de la etiqueta de parágrafo.<P> Este crea un salta de línea y espacio entre líneas.

Ejemplo 1:<BR>
<BR>
<P align="left">
Este ejemplo <BR>
despliega el uso <BR>
de la etiqueta de parágrafo .<BR>
<BR>
Ejemplo 2:<BR>
<BR>
<P align="right">
Este ejemplo <BR>
despliega el uso <BR>
de la etiqueta de parágrafo <BR>
<BR>
Ejemplo 3:<BR>
<BR>
<P align="center">
Este ejemplo <BR>
despliega el uso <BR>
de la etiqueta de parágrafo

Este ejemplo despliega el uso de la etiqueta de parágrafo.

Este crea un salta de línea y espacio entre líneas.

Ejemplo 1:

Este ejemplo
despliega el uso
de la etiqueta de parágrafo .

Ejemplo 2:

Este ejemplo
despliega el uso
de la etiqueta de parágrafo .

Ejemplo 3:

This is an example
despliega el uso
de la etiqueta de parágrafo .

<TABLE>

Tabla

Ejemplo 1:

<TABLE BORDER="4" CELLPADDING="2"  CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Columna 1</TD>
<TD> Columna 2</TD>
</TR>
</TABLE>

Ejemplo 2: (Internet Explorer)

<TABLE BORDER="2" BORDERCOLOR=" #336699 " CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD> Columna 1</TD>
<TD> Columna 2</TD>
</TR>
</TABLE>

Ejemplo 3:

<TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD BGCOLOR=" #CCCCCC "> Columna 1</TD>
<TD BGCOLOR=" #CCCCCC "> Columna 2</TD>
</TR>
<TR>
<TD>Fila 2</TD>
<TD> Fila 2</TD>
</TR>
</TABLE>

Ejemplo 1:

Columna 1

Columna 2


Ejemplo 2:

Columna 1

Columna 2

Ejemplo 3:

Columna 1

Columna 2

Fila 2

Fila 2

<TD>

Datos de tabla

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD> Columna 1</TD>
<TD>
Columna 2</TD>
</TR>
</TABLE>

Columna 1

Columna 2

<TITLE>

Titulo pagina

<TITLE> Titulo pagina </TITLE>

Titulo pagina

<U>

Subrayado

<U> Ejemplo </U>

Ejemplo

<UL>

Lista desordenada

Ejemplo 1:<BR>
<BR>
<UL>
<LI>Lista item 1
<LI> Lista item 2
</UL>
<BR>
Ejemplo 2:<BR>
<UL type="disc">
<LI> Lista item 1
<LI> Lista item 2
<UL type="circle">
<LI> Lista item 3
<LI> Lista item 4
</UL>
</UL>

Ejemplo 1:

  • List item 1
  • List item 2


Ejemplo 2:

  • List item 1
  • List item 2
    • List item 3
    • List item 4
 

Ahora bien se ha explicado a media de esta capitulo lo que es Internet, y una pagina Web, pero cuales son los pasos para la creación de una pagina que sea agradable para los usuarios.

Primero tenemos que especificar la diferencia entre una pagina web y un sitio web.

 
 

Mapa de Sitio | Privacy Policy | Contactame | ©2004