Qué es un navegador?

Para poder acceder al World Wide Web es necesario emplear un programa cliente de este servicio.A estos clientes se les suele denominar “browsers” o “navegadores”, ya que al movernos de un servidor Web a otro es como si estuviesemos “navegando” por la red.
Los navegadores han sido fundamentales para la popularización de Internet, principalmente debido a su facilidad de manejo para usuarios no expertos en informática y que permiten capturar cualquier documento de Internet, independientemente de su localización y formato y presentarlo al usuario.
Gracias a esto no es necesario seguir los complicados pasos que requerían el conocimiento del sistema Unix para poder realizar, por ejemplo, la transferencia de un archivo por ftp.
Los navegadores ofrecen un interfaz gráfico que permite navegar por la red simplemente usando el ratón en un soporte multimedia, para poder realizar cualquier tipo de búsquedas y encontrar lo que deseamos.
Básicamente, los navegadores son visualizadores de documentos escritos en lenguaje HTML, los cuales pueden incluir texto, gráficos, sonidos, enlaces (links) a otros documentos o servidores Web.

CSS para maquetar un boletín

Las ventajas de la maquetación CSS, con respecto a la maquetación tradicional por tablas, se pueden aplicar también a envíos de boletines en formato HTML.
26/5/05 – La maquetación con CSS ofrece muchas ventajas para la accesibilidad de la página, carga en bytes y claridad del código. En este artículo vamos a contar cómo podemos aprovecharnos de esas ventajas también en los boletines de novedades enviados en formato HTML. Para maquetar con CSS se utiliza una hoja de estilo en cascada, donde se especifica cualquier atributo de aspecto de la página, separando por completo el contenido y presentación. El contenido se define en el código HTML de la página y cualquier especificación del aspecto se incluye en un archivo externo CSS.
Referencia: Para saber más de CSS podemos consultar la sección CSS a fondo. También podemos consultar acerca de la maquetación CSS.Un newsletter, como se ha comentado en nuestro manual de boletines de novedades, se puede enviar en formato HTML para dar vistosidad al correo. En esos casos, a la hora de crear el boletín se debe hacer una página web normal y luego se enviará como cuerpo del mensaje. Como cualquier otra página web, la que creamos para hacer el boletín, puede realizarse utilizando CSS, lo que redundará en ventajas para el creador del boletín y suscriptor.
El peso del mensaje se podrá reducir, al no ser necesario incluir ninguna etiqueta HTML para definir los estilos. Esto nos ahorrará mucho código.
Podremos cambiar el aspecto del mensaje con sólo cambiar la hoja de estilos, sin necesidad de modificar el código HTML que venimos utilizando para hacer el envío. Esto nos ofrece una mayor capacidad de innovación en el envío del mensaje.
Si se pierde la hoja de estilos por cualquier razón o el sistema de correo del suscriptor no soporta CSS, simplemente verá el mensaje sin el aspecto definido por el creador del boletín. Pero por lo menos verá perfectamente el envío, con toda la información del mensaje, presentada con los estilos predeterminados del sistema del usuario.
En caso de que a un usuario no soporte formato HTML, podría darse el caso de que viese el código de la página (con las etiquetas y todo), en lugar de ver el formato web. En ese caso, por lo menos recibiría un código mucho más legible y comprensible por el suscriptor, que si estuviera mezclado con etiquetas HTML para definir los estilos.
A la hora de crear los distintos boletines cada vez, se ahorra tiempo, puesto que no hay que preocuparse por definir los estilos. Es decir, la modificación es mucho más sencilla. Como todo en esta vida, maquetar un boletín con CSS, también tiene algunas desventajas.
La principal que veo es que hace falta tener mayores conocimientos para crear un boletín con CSS. Es decir, cualquier persona es capaz de hacer una página con HTML básico utilizando un editor de webs como Frontpage o Dreamweaver. Sin embargo, con CSS deberemos dominar una tecnología adicional y algún que otro programa para realizar el trabajo.
Otra desventaja es que algunos sistemas de correo no incluyen enlaces con archivos externos, ya sean imágenes o declaraciones CSS. Esto hace que no muestren los estilos del boletín, aunque por lo menos se mostrará la página básica sin los estilos. Una posibilidad para evitar esto es incluir los estilos dentro del propio código de la página, aunque entonces estaremos contaminando un poco el código limpio de nuestro boletín. Ejemplo de boletín en formato HTML con CSS Nosotros llevamos tiempo enviando en nuestra web MercadoProfesional.com un boletín semanal en formato HTML, que está maquetado por completo con CSS. Vamos a mostrar aquí su código HTML y el código CSS que utilizamos para definir los estilos. Sería bueno ver el boletín en una página aparte, para hacernos una idea previa del contenido y estilo creados. Código HTML Podemos ver a continuación el código HTML de uno de nuestros boletines de novedades. <html> <head>     <title>Boletín de novedades 25 .:MercadoProfesional.com:.</title>    <link rel=”STYLESHEET” type=”text/css” href=”estilos.css”> </head> <body> <div id=”container”>    <div id=”cabecera”>     <div id = “titulo”>     <h1>Boletín de novedades<BR> MercadoProfesional.com</h1>     </div>     <div id=”logo”>       <a href=”http://www.mercadoprofesional.com/”><img src=”http://www.mercadoprofesional.com/mail_boletin_novedades/imgs/logo.gif” width = “155px” height = “78px” border=”0px” valign=”top”></a>      </div>     </div>     <div id=”topCuerpo”></div>     <div id=”cuerpo”>       <div id=”numBoletin”> Boletín de Novedades 25 # 18/05/2005 # </div>     <div id=”cuerpo1″>     <p>Saludos cordiales,    </p>    <p> Te llega este correo por ser uno de los profesionales registrados en MercadoProfesional.com Te informamos de las nuevas solicitudes que han llegado, para que no dejes pasar la oportunidad de enviar tus presupuestos. </p> </div>     <div id=”cuerpoNov”><h2 class=”icoTit”> Nuevos Proyectos: </h2>     <h3 class=”icoNovedad”> <a href=”http://www.mercadoprofesional.com/profesionales/solicitudes/364.php”> Tienda Online</a></h3>     <p class=”par”>Tienda online, muy bien definida, para venta de servicios de revelado online</p>     <h3 class=”icoNovedad”> <a href=”http://www.mercadoprofesional.com/profesionales/solicitudes/366.php”> Desarrollo de portal inmobiliario</a></h3>     <p class=”par”>Como su nombre indica, un portal inmobiliario, hacen especial hincapié en la funcionalidad.</p>     <h3 class=”icoNovedad”> <a href=”http://www.mercadoprofesional.com/profesionales/solicitudes/368.php”> Desarrollo de portal</a></h3>     <p class=”par”>Desarrollo y promoción de un portal, exactamente, no sabemos que temática quieren utilizar.</p>     <h3 class=”icoNovedad”> <a href=”http://www.mercadoprofesional.com/profesionales/solicitudes/369.php”> Formulario de flash y PHP</a></h3>     <p class=”par”>Breve desarrollo en php para una aplicación en flash, con opciones de seguir colaborando en el futuro.</p>    </div>    <p>Esta semana tenemos 4 proyectos nuevos.</p>    <p>Simplemente despedirnos de todos vosotros y desearos suerte con los presupuestos.</p>    <p>© Guiarte Multimedia S.L. – +34 915440837 – <a href =”mailto:info@mercadoprofesional.com”>info@mercadoprofesional.com</a> -</p> </div> <div id=”pieCuerpo”></div> </body> </html> Como este código no tiene ningún estilo definido a través de HTML, resulta bastante sencillo de interpretar. Código CSS Ahora podemos ver el código del archivo CSS que estamos utilizando para definir los estilos del documento. Seguramente alguno de los estilos definidos no lo estaremos utilizando en esta edición del boletín de novedades. No os estrañaros por eso. En general, no extrañarse si no está totalmente optimizada la declaración de estilos. BODY {     margin : 0 0 0 0px;    background-color: #CCCCCC;    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;    text-align : center; } #cabecera {     background-image: url(imgs/fondo_cab.gif);     background-repeat : no-repeat;     margin : 0 0 0 0px;     background-position : right;     padding : 0 0 0 0px;     width : 500px;     height: 96px; } #logo {     padding : 7 20 11 20px; } #titulo {     padding : 18 20 0 20px;     float : right;     margin-right: 24px; } #container {     width : 500px;     padding : 0 0 0 0px;     margin : auto;     text-align : left; } #topCuerpo {     margin-bottom : 0px;     margin-left : 0px;     margin-right : 0px;     margin-top : 5px;     border-bottom : 1px solid #9b9b9b;     width : 493px;     float : right; } #cuerpo {     font-family: Verdana, Arial, Helvetica, sans-serif;     font-size: 10px;     padding : 10 10 10 10px;     background-image : url(imgs/fondo_cuerpo.gif);     margin : 0 0 0 6px;     background-position : right;     background-repeat : repeat-y;     clear : both; } A:ACTIVE{     color : #003366; } A:HOVER{     color : #003366;     text-decoration : none; } A:LINK{     color : #003366; } A:VISITED {     color : #003366; } #numBoletin {     background-color : #e9e9e9;     border : 1px solid #666666;     width : 304px;     float : right;     padding : 6 0 6 10px; } #cuerpo1 {     clear : both;     padding-top: 10px; } #cuerpoNov {     background-color : #d2e3fb;     border : 1px solid #666666;     padding : 5 10 10 5px; } #pieCuerpo {     background-image : url(imgs/bajo_cuerpo.gif);     height:9px;     background-repeat : no-repeat;     margin-left : 6px; } H1 {     font-size : 16px;     font-weight : bold;     color : #003366;     text-align : center; } H2 {     font-size : 11px;     font-weight : bold;     color : #003366; } .icoTit{     background-image : url(imgs/IcoTit.gif);     background-repeat : no-repeat;     padding-left:12px;     margin-top:0px;     background-position : left; } H3 {    font-size: 10px;    font-weight : bold;    color : #003366; } .icoNovedad{     background-image : url(imgs/IcoNovedad.gif);     background-repeat : no-repeat;     padding-left:10px;     margin-left:3px;     margin-top:0px;     margin-bottom:2px;     background-position : left; } .par{     margin-top:2px;     padding-left:10px;     margin-left:3px; } .resaltado {     background-color : #e9e9e9;     border : 1px solid #666666;     padding : 6 0 6 10px; } La declaración de estilos resulta bastante larga, pero como decíamos, se puede podría optimizar bastante todavía. Podemos ver el boletín en una página aparte. Conclusión El paso más difícil para realizar este boletín es hacer la maquetación propiamente dicha en CSS. Pero siempre resulta interesante perder un poco de tiempo para mejorar nuestra manera de hacer las cosas. Antes de acabar, queremos poner un enlace a una página para visualizar el boletín sin la definición de estilos asociada. Así es como se vería el boletín si por cualquier cuestión el sistema del suscriptor no acepta CSS o no se llega a enlazar con la hoja de estilos por cualquier motivo. Se verá que el boletín queda bastante comprensible, aunque no tan vistoso.
 Seguir navegando a partir aquí: + 2 manuales relacionados+ 1 categoria relacionada+ 2 comentarios (Añadir)+ 10 comentarios no revisados
 Autoría, licencia y acciones sobre este artículo
window.google_render_ad();
Informe de Diego Pinilla*Responsable relaciones exteriores de MercadoProfesional.comURL: http://www.mercadoprofesional.com

HTML-4

 Hipervínculos: ¿Qué le hace un web

Conjure in your mind the image of a spider web. Evocar en su mente la imagen de una telaraña. Nevermind, you can look at the picture too. No importa, se puede ver en la imagen. Its filaments travel from the center in all directions. Sus filamentos de viaje desde el centro en todas las direcciones. Each strand is linked with another strand, and another to form the whole. Cada capítulo está vinculado con otro capítulo, y otro para formar el conjunto. Such is the Internet, banded together as a series of millions of networked webs. Tal es el Internet, se unieron como una serie de millones de webs en red. The H yper T ext T ransport P rotocol is the spider to the World Wide Web. El H yper T ext T RANSPORTE P ROTOCOLO es la araña de la World Wide Web. Ever notice how nearly all web addresses begin with the characters HTTP? Ever cuenta de cómo casi todas las direcciones web comienzan con los caracteres HTTP? That tells your computer to link to the WWW, and HTML is the language you use to do this hyperlinking . Que le dice a su ordenador para enlazar con la WWW y HTML es el lenguaje que se utiliza para hacer esto hiperenlaces.

It all starts with the anchor tag, abbreviated <A>. Todo empieza con la etiqueta de ancla, abreviado <a>. Here is how you would create a hyperlink to this web site: Aquí está la forma en que usted podría crear un hipervínculo a este sitio web:

 

<a href=”http://internetbrothers.com”>Internet Brothers</a> <a href=”http://internetbrothers.com”> Internet Hermanos </ a>

 

What does all this mean? ¿Qué significa todo esto? As stated above, A is for anchor, it denotes a link. HREF stands for H ypertext Ref erence, and assigns the URL or Uniform Resource Locator to follow. Como se ha señalado anteriormente, es de un ancla, que denota un vínculo. Href está a favor de H ypertext Ref rencia, y asigna la dirección URL o localizador uniforme de recursos a seguir. http://internetbrothers.com is the FULL address, or URL, of the home page of this site, and must be enclosed in double quotes. http://internetbrothers.com es la dirección completa, o URL de la página principal de este sitio, y debe ser incluida entre comillas dobles. Internet Brothers is the literal text you want displayed as the hyperlink, it could just as easily say click here. Internet Hermanos es el texto literal que desee mostrar como el hipervínculo, se podría decir tan fácilmente clic aquí. Finally, the </A> closes the anchor tag. Por último, la </ A> cierra la etiqueta de ancla. Below is what appears on the page with the use of this anchor tag set. A continuación se muestra lo que aparece en la página con el uso de este código delimitador conjunto. Click on it, a new browser window opens to the Internet Brothers entry page. Haga clic en él, una nueva ventana del navegador de Internet para la página de entrada Hermanos.

Internet Brothers Hermanos Internet

You may have noticed as you hovered your mouse cursor over the words Internet Brothers, the cursor changed into a hand with the index finger extended (before you ask, no you can’t change which finger with HTML). Usted podrá notar a medida que rondado el cursor del ratón sobre las palabras Hermanos Internet, ha cambiado el cursor en una mano con el dedo índice extendido (antes de preguntar, no no puede cambiar dedo de la mano que con el lenguaje HTML). This is your browser’s way of telling you this text or image is a hyperlink. Este es el navegador de manera de decirle que este texto o la imagen es un hipervínculo. Also, if you were really paying attention, you observed the URL address appearing in the status bar at the bottom of your browser window. Además, si realmente se presta atención, usted observa la dirección URL que aparece en la barra de estado en la parte inferior de la ventana del navegador. This will tell you where you are going. Éste le dirá en dónde se dirige. Pretty cool, huh? Bastante cool, ¿eh?

Another type of hyperlink is mailto: . Otro tipo de enlace es mailto:. When your browser detects this Hypertext reference, as opposed to HTTP, it launches your default email program. Cuando el navegador detecta este hipertexto de referencia, a diferencia de HTTP, se pone en marcha su programa de correo electrónico predeterminado. Try it by clicking the graphic at left. Pruébalo haciendo clic en el gráfico de la izquierda. You code the mailto: anchor as follows: Usted el código mailto: ancla de la siguiente manera:

 

<a href=”mailto:jhclark@earthlink.net”>Send Us Mail</a> <a href=”mailto:jhclark@earthlink.net”> Envíenos Correo </ a>

 

Getting connected, that’s what the Internet is all about. Cómo conseguir una conexión, eso es lo que el Internet se trata. Through the use of hyperlinks you connect the dots of your site, and link it with the rest of the World Wide Web. Mediante el uso de hipervínculos que conectan los puntos de su sitio, y vincularlo con el resto de la World Wide Web. Take some time now to work with this very important concept in HTML. Tome algún tiempo para trabajar con este concepto muy importante en HTML. Remember the vision of the spider web. Recuerde que la visión de la telaraña. When you feel comfortable, go ahead and proceed to fun with graphic images. Cuando usted se sienta cómodo, seguir adelante y proceder a la diversión con imágenes gráficas.

HTML-3

Manipulación de Texto

So, did you try out the tags you’ve learned so far? Así que, ¿probar las etiquetas que has aprendido hasta ahora? No? ¿No? Shame on you. No, no, no. These tutorials build on themselves, you need to understand what came before to move on. Estos tutoriales se basan en sí mismos, es necesario entender lo que vino antes de avanzar. Now, go back to Lesson 2 , build a page with bold and italic text, make some paragraphs and horizontal reference lines, then you can return here and learn about resizing text. Ahora, regrese a la Lección 2, crear una página en negrita y cursiva texto, hacer algunos párrafos y líneas de referencia horizontal, entonces puedes volver aquí y aprender acerca del cambio de tamaño de texto.

Though not as popular as before, the Heading tags are among the original, basic constructs for HTML page formatting. Aunque no tan popular como antes, la Denominación etiquetas se encuentran entre el original, las construcciones de base para la página de formato HTML. The letter H and a number from 1 to 6 determine the size of text in a heading. La letra H y un número del 1 al 6 de determinar el tamaño del texto en una partida. Here is how simple the heading tags are: Aquí es cómo la simple partida etiquetas son:

 

<h1>Heading1 is this size</h1> <h1> Heading1 este tamaño es </ h1>

 

<h2>Heading2 is this size</h2> <h2> Heading2 este tamaño es </ h2>

 

<h3>Heading3 is this size</h3> <h3> Heading3 este tamaño es </ h3>

 

<h4>Heading4 is this size</h4> <h4> Heading4 este tamaño es </ H4>

 

<h5>Heading5 is this size</h5> <h5> Heading5 este tamaño es </ h5>

 

<h6>Heading6 is this size</h6> <h6> Heading6 este tamaño es </ h6>

 

As mentioned above, Heading tags have lost favor because they tend to be stand-alone. Como se mencionó anteriormente, la rúbrica Etiquetas han perdido a favor porque tienden a ser autónomo. You can’t align other text or graphics with Heading tags. No se puede alinear otro texto o gráficos con Denominación etiquetas. The recent solution to this is the Font tag. La reciente solución a esto es la etiqueta Font. Using fonts allows you to set size, color, type face, and alignment with your text. El uso de las fuentes le permite definir el tamaño, color, tipo de cara, y la alineación con el texto.

<font size=5>Font size 5 is this size</font> <font size=5> Tamaño de fuente 5 es este tamaño </ font>

<font size=3>Font size 3 is this size</font> <font size=3> Tamaño de la fuente es 3 este tamaño </ font>

<font color=red>Font color red does this</font> <font color=red> Font color rojo hace esto </ font>

<font face=Times>Font face Times changes type</font> <font face=Times> Font cara cambios tipo Times </ font>

Do you remember the <P> paragraph tag from the previous lesson? ¿Te acuerdas de la etiqueta <P> apartado de la lección anterior? The align attribute allows you to control the placement of text or graphics on the page. El atributo align le permite controlar la colocación de texto o gráficos en la página. Align has four options that make page layout a snap. Alinear tiene cuatro opciones que hacen diseño de página un broche de presión. These are left, right, center, and justify. Se trata de la izquierda, derecha, centro, y justificar. Left is the default if you don’t specify the align attribute. Izquierda es el valor por defecto si no especifica el atributo align. This paragraph is using the justify alignment, both left and right margins are justified. Este apartado está utilizando justificar la alineación, tanto a izquierda y derecha márgenes están justificadas.

<p align=center>Center alignment</p> <p align=center> Centro de alineación </ p>

<p align=left>Left alignment</p> <p align=left> Izquierda alineación </ p>

<p align=right>Right alignment</p> <p align=right> Derecho alineación </ p>

With the Heading, Font, and Paragraph tags you should be able to create any text based Web page you like. Con la rúbrica, Font, etiquetas y en el párrafo debería ser capaz de crear cualquier texto basado página Web que desee. Take a break now, go to your text editor, and work with text manipulation. Tómese un descanso ahora, vaya a su editor de texto, y trabajar con la manipulación del texto. Use your browser’s view source feature to look at this page if you like. Utilice su navegador juicio de la fuente función para ver en esta página, si lo desea. Use your browser’s File/Open menu to view the HTML file you have created. Utilice su navegador Archivo / Abrir el menú para ver el archivo HTML que haya creado. When you’re done, come on back and we’ll show you how to link your pages with each other and with the rest of the World Wide Web. Cuando hayas terminado, ven en la espalda y le mostraremos la forma de vincular sus páginas entre sí y con el resto de la World Wide Web. Manipulación de Texto

So, did you try out the tags you’ve learned so far? Así que, ¿probar las etiquetas que has aprendido hasta ahora? No? ¿No? Shame on you. No, no, no. These tutorials build on themselves, you need to understand what came before to move on. Estos tutoriales se basan en sí mismos, es necesario entender lo que vino antes de avanzar. Now, go back to Lesson 2 , build a page with bold and italic text, make some paragraphs and horizontal reference lines, then you can return here and learn about resizing text. Ahora, regrese a la Lección 2, crear una página en negrita y cursiva texto, hacer algunos párrafos y líneas de referencia horizontal, entonces puedes volver aquí y aprender acerca del cambio de tamaño de texto.

Though not as popular as before, the Heading tags are among the original, basic constructs for HTML page formatting. Aunque no tan popular como antes, la Denominación etiquetas se encuentran entre el original, las construcciones de base para la página de formato HTML. The letter H and a number from 1 to 6 determine the size of text in a heading. La letra H y un número del 1 al 6 de determinar el tamaño del texto en una partida. Here is how simple the heading tags are: Aquí es cómo la simple partida etiquetas son:

 

<h1>Heading1 is this size</h1> <h1> Heading1 este tamaño es </ h1>

 

<h2>Heading2 is this size</h2> <h2> Heading2 este tamaño es </ h2>

 

<h3>Heading3 is this size</h3> <h3> Heading3 este tamaño es </ h3>

 

<h4>Heading4 is this size</h4> <h4> Heading4 este tamaño es </ H4>

 

<h5>Heading5 is this size</h5> <h5> Heading5 este tamaño es </ h5>

 

<h6>Heading6 is this size</h6> <h6> Heading6 este tamaño es </ h6>

 

As mentioned above, Heading tags have lost favor because they tend to be stand-alone. Como se mencionó anteriormente, la rúbrica Etiquetas han perdido a favor porque tienden a ser autónomo. You can’t align other text or graphics with Heading tags. No se puede alinear otro texto o gráficos con Denominación etiquetas. The recent solution to this is the Font tag. La reciente solución a esto es la etiqueta Font. Using fonts allows you to set size, color, type face, and alignment with your text. El uso de las fuentes le permite definir el tamaño, color, tipo de cara, y la alineación con el texto.

<font size=5>Font size 5 is this size</font> <font size=5> Tamaño de fuente 5 es este tamaño </ font>

<font size=3>Font size 3 is this size</font> <font size=3> Tamaño de la fuente es 3 este tamaño </ font>

<font color=red>Font color red does this</font> <font color=red> Font color rojo hace esto </ font>

<font face=Times>Font face Times changes type</font> <font face=Times> Font cara cambios tipo Times </ font>

Do you remember the <P> paragraph tag from the previous lesson? ¿Te acuerdas de la etiqueta <P> apartado de la lección anterior? The align attribute allows you to control the placement of text or graphics on the page. El atributo align le permite controlar la colocación de texto o gráficos en la página. Align has four options that make page layout a snap. Alinear tiene cuatro opciones que hacen diseño de página un broche de presión. These are left, right, center, and justify. Se trata de la izquierda, derecha, centro, y justificar. Left is the default if you don’t specify the align attribute. Izquierda es el valor por defecto si no especifica el atributo align. This paragraph is using the justify alignment, both left and right margins are justified. Este apartado está utilizando justificar la alineación, tanto a izquierda y derecha márgenes están justificadas.

<p align=center>Center alignment</p> <p align=center> Centro de alineación </ p>

<p align=left>Left alignment</p> <p align=left> Izquierda alineación </ p>

<p align=right>Right alignment</p> <p align=right> Derecho alineación </ p>

With the Heading, Font, and Paragraph tags you should be able to create any text based Web page you like. Con la rúbrica, Font, etiquetas y en el párrafo debería ser capaz de crear cualquier texto basado página Web que desee. Take a break now, go to your text editor, and work with text manipulation. Tómese un descanso ahora, vaya a su editor de texto, y trabajar con la manipulación del texto. Use your browser’s view source feature to look at this page if you like. Utilice su navegador juicio de la fuente función para ver en esta página, si lo desea. Use your browser’s File/Open menu to view the HTML file you have created. Utilice su navegador Archivo / Abrir el menú para ver el archivo HTML que haya creado. When you’re done, come on back and we’ll show you how to link your pages with each other and with the rest of the World Wide Web. Cuando hayas terminado, ven en la espalda y le mostraremos la forma de vincular sus páginas entre sí y con el resto de la World Wide Web.

HTML-1

 Primeros pasos

Sometimes it seems trite to state the obvious, but we have to start somewhere. A veces parece trillado a lo obvio, pero tenemos que empezar en alguna parte. You need a computer to develop HTML, you can’t do it on a radio. Usted necesita un ordenador para desarrollar el lenguaje HTML, puedes no hacerlo en una emisora de radio. Next you need a Web browser, the most popular ones are Netscape’s Communicator, and Microsoft’s Internet Explorer. Both are free. Luego usted necesita un navegador web, los más populares son el Netscape Communicator, y de Microsoft Internet Explorer. Ambos son gratuitos. Again stating the obvious, since you’re looking at this page, you know . Una vez más afirmar lo obvio, ya que usted está buscando en esta página, usted sabe. . . . . Finally, you will need some sort of word processor, nothing fancy, just a simple text editor like Notepad that comes with Windows, or the Macintosh Simple Text program. Por último, será necesario algún tipo de procesador de palabras, nada de fantasía, un simple editor de texto como el Bloc de Notas que viene con Windows, Macintosh o el programa de texto simple.

HyperText Markup Language is what it stands for, meaning that it is a computer language based on text that allows you to markup your Web pages in your choice of appearance, and have them link to the rest of the World Wide Web in a “hyper” or non-linear fashion. HyperText Markup Language es lo que está a favor, lo que significa que es un lenguaje de computadora basado en texto que le permite la marcación sus páginas Web en su elección del demandado, y ellos tienen vínculo con el resto de la World Wide Web en un “hiper” o no-lineal de moda. It’s like enjoying your vacation where you want to go, not just where the bus company will take you. Es como disfrutar de sus vacaciones dónde quiere ir, y no sólo cuando la empresa de autobuses te llevará.

You use the word processor to type or “write” the HTML language code, and the browser to view the results. Puede utilizar el procesador de textos para escribir o “escribir” el código de lenguaje HTML, y el navegador para ver los resultados. The browser interprets the code, known as tags, and displays your Web page. El navegador interpreta el código, conocido como etiquetas, y muestra su página Web. Experienced developers may at this point say “what about WYSIWYG editors or HTML assistants?” Mayo desarrolladores con experiencia en este momento decir “¿qué pasa con los editores WYSIWYG o HTML asistentes?” Remember this tutorial is about HTML basics and getting started. Recuerde que este tutorial es acerca de HTML básico y empezar. You do that by learning the code, not by having a program do it for you. Usted lo hace por el aprendizaje del código, no por tener un programa lo haga por ti.

Like most files on computers, HTML has it’s own naming convention. Como la mayoría de los archivos en las computadoras, HTML tiene su propio nombre convencional. You start by giving the file you are editing a name that describes its content, followed by the HTML extension of .htm or .html . Usted comienza por que la extensión del archivo que está editando un nombre que describe su contenido, seguido por la extensión de HTML. Htm o. Html. Either extension works fine in all browsers, the three character .htm is primarily used for older Windows version 3 systems that were limited to short file names. Cualquiera de extensión funciona bien en todos los navegadores, los tres caracteres. Htm se utiliza principalmente para mayores de Windows la versión 3 sistemas que se limitaron a corto nombres de los archivos. You will notice in your browser address bar that this page is named htmltut1.htm . Usted notará en su barra de direcciones de su navegador que esta página se llama htmltut1.htm. HTM or HTML is the file association your computer uses to know to launch a browser to open the file. HTM o HTML es la asociación de archivos de su ordenador utiliza para saber a lanzar un navegador para abrir el archivo.

Before moving on to the next tutorial, lets talk about one of the quickest, simplest ways to learn HTML coding, stealing. Antes de pasar a la siguiente tutorial, permite hablar de una de las más rápida, más sencilla la manera de aprender HTML de codificación, el robo. Well, not really stealing, maybe borrowing. Bueno, realmente no robar, tal vez de préstamos. We learn from those that have come before, right? Aprendemos de aquellos que han llegado antes, ¿verdad? So why not take advantage of the skills that others already have to begin to develop your own? Entonces, ¿por qué no aprovechar las habilidades que otros ya tienen que empezar a desarrollar su propia? Most every contemporary browser has a dynamite feature called View Source . La mayoría de todos los contemporáneos navegador tiene una característica denominada dinamita Ver código fuente. If you see a page in your browser that you really like, you can see how the author created it by selecting View on the browser menu bar, then choosing Source or Document Source from the drop-down. Si aparece una página en el navegador que usted realmente desea, puede ver cómo el autor lo creó seleccionando Ver en la barra de menús del navegador, a continuación, elija Fuente o Documento Origen en el menú desplegable

Diccionario de conceptos de Internet

Ancho de banda: Medida de capacidad de comunicación o velocidad de transmisión de datos de un circuito o línea. En un servicio de Hosting, Esta es la que limita cuanta transferencia mensual se transferirá a todos los que ingresen a la página web. Por ejemplo: Si nuestro hosting tiene 20.000 Mb. de transferencia mensual, eso quiere decir que aproximadamente podríamos recibir en promedio entre 20.000 y 40.000 Visitas Mensuales. Un ejemplo más claro sería que en nuestra página web tengamos un archivo para descarga de 1Mb, si 10 personas descargan ese archivo, quiere decir que se ha usado un ancho de banda de 10 Mb quedandonos disponibles 19.990 Mb.

Antivirus: Programa dedicado a detectar la existencia de virus en el computador y a eliminarlos, en caso de encontrarlos. Para hacerlo, emplea un módulo que revisa los archivos y otro que limpia, Normalmente se utiliza el internet para actualizar la definición de los virus del programa (serie de secuencias para detectar los nuevos virus y poder eliminarlos); Esto es de grán importancia para eliminar los nuevos virus.

Attachments: Archivos o carpetas que se envían adjuntos a un mensaje de correo electrónico. Estos pueden ser imágenes, información, audio o video.

AVI: Audio-Video Interleave. Estándar de video de Microsoft Windows.

Banner: Banner en español es bandera, estandarte. Generalmente encontrarás que, al hablar de un banner, es una imagen de tamaño especial, que se usará para anunciar páginas o productos en Internet. Banners publicitarios o de intercambio de páginas, servicios o productos. Son más frecuentes en los Portales.

Banda Ancha: Ruta o línea de comunicación de gran capacidad. Normalmente implica una velocidad entre 128 Kbps hasta unos 1544 Mbps.

Buscador: Es una página donde se han dado de Alta las páginas de Internet, de esa manera es mas fácil encontrar información mediante los Meta Tags de las paginas. Los buscadores más famosos son Yahoo y Google. Sin los buscadores sería prácticamente imposible encontrar páginas con los temas de nuestro interés.

Browser: Por Browser o Navegador se define al programa que nos permite visualizar los contenidos de la World Wide Web. El primer browser con interfase gráfica fue el Mosaic inventado en 1992. A este browser le siguió el Netscape Navigator y finalmente el Internet Explorer.

CD-ROM: Sigla que significa Compact Disc-Read Only Memory o Disco Compacto-Memoria Sólo de Lectura (no pueden ser grabados). Contienen información digital, vale decir, datos que pueden ser representado por bits: combinaciones de unos y ceros. Así, a nivel microscópico, se puede encontrar en los surcos del CD pequeñas muescas y sectores planos, para indicar esos unos y ceros, que son leídos mediante un rayo láser, que va recorriendo la superficie del disco mientras éste va girando. (Música, video, informacion, etc)

CHAT: Conversación en tiempo real a través de Internet. Si bien se aplica preferentemente a conversaciones a través de mensajes escritos, también existen Chat que incluyen intercambio de sonidos (voz) e imagen (video). (Net meeting)

Cookie: Es un archivo que se graba en tu disco duro y que es generado a partir de la visita a una página web. El objetivo de este archivo es dar a conocer cuáles son tus preferencias del sitio web visitado que generó tu cookie, para darte una atención personalizada.

Cursor: Pequeña flecha u otro tipo de indicador que se desplaza sobre la pantalla del ordenador, manejado por el ratón.

Cracker: Delincuente que accede ilegalmente a sistemas informático para destruir información, modificarla o, en general, causar daño.

Dirección IP: Descripción formal de una dirección de Internet estándar, que utiliza números en lugar de nombres (dominios).

Dominio: El dominio es la palabra que hace referencia al nombre que tiene una página web en Internet. De esa forma si tu quieres tener un site con nombre propio, por ejemplo joseperez.com debes registrar el dominio y comprarlo en Networksolutions u otra empresa autorizada para vender dominios. La compra la efectúas a través de tu tarjeta de crédito internacional.

Download: Se conoce como Download a la descarga de información que va de un servidor a una computadora personal. Información que puede ser texto, imágenes y audio.

Driver: Controlador de dispositivo. (Controladores)

DVD: Significa Digital Video Disc. Se trata de un nuevo sistema de almacenamiento de video, muy parecido en su formato a un láser disc, pero con mayor capacidad.

E-Commerce: Comercio-e. Comercio electrónico es aquel que se realiza a través de Internet.

E-mail: Correo-e. El correo electrónico es el servicio más antiguo y básico. Además es el más utilizado en Internet. Permite intercambiar mensajes, programas, audio, vídeo e imágenes a los usuarios de Internet.

FAQ: Frequently Asked Questions, (Preguntas frecuentes) Recopilación de preguntas y respuestas que se plantean frecuentemente sobre un tema en particular. Se suelen construir a partir de mensajes enviados a grupos de news.

Fibra óptica: Tipo de cable que se basa en la transmisión de información por técnicas optoeléctricas. Se caracteriza por un elevado ancho de banda, y por tanto una alta velocidad de transmisión, y poca pérdida de señal.

Firewall: Cortafuegos. Máquina que se sitúa entre una red local y el resto de Internet para limitar el tráfico que puede pasar entre las dos redes. Una de las razones de su existencia es la existencia de crackers.

Formulario: En el Web, un servicio que permite introducir información a enviar a la ubicación web remota para procesarla.

Frames: Elementos HTML que permiten al navegador separar su ventana en unidades independientes para recibir código HTML distinto en cada una.

FTP: File Transfer Protocol. Protocolo de transferencia de ficheros. Uno de los protocolos más comunes para intercambiar ficheros entre ordenadores.

Gigabyte: Un Gigabyte es la medida de almacenamiento de información que hace referencia a una capacidad de un billón de bytes. En cuanto a equivalencias para que te quede más claro un gigabyte son 1000 megabytes.

Cibernauta o Internauta: Persona que “navega” por la Internet; es un nombre que se aplica desde fuera de la comunidad de usuarios: “Es un internauta”.

Hacker: Persona altamente calificada, el cual ingresa a los servidores o computadoras, normalmente hace “travesuras” mas no causa daño, el propósito es dejar en claro que la seguridad en donde entro es vulnerable, a veces lo hacen simplemente para probar su destreza, a comparación del cracker que hace daño.

Hardware: Partes físicas que componen tu PC, como puede ser impresora, scaner, monitor, cámara, micrófono, bosinas, modem, etc.

Hosting, Servicio de Hosting, Alojamiento de páginas : Host en español es Anfitrion. Es el servidor en que se guarda cualquier información que estará disponible en Internet. Este servicio es de grán importancia si queremos estar en internet, ya que es aquí donde llegaremos cuando escribamos una direccion en nuestro navegador. Si la direccion que escribimos no tiene hosting, no aparecerá la página web.

Interactivo: Es aquel elemento (de una página Web o de un programa) que responde a las acciones del usuario.

Internet: Conjunto de millones de computadoras conectadas entre sí a nivel mundial. Se le conoce como la Red.

IP: Internet Protocol, el protocolo de comunicaciones que emplean (casi) todos los ordenadores en Internet.

ISP: (Internet Service Provider o proveedor) Empresa u organización que brinda el servicio de conexión a Internet.

Java: Ambiente de programación simple, robusto, de propósito general, dinámico, multitareas, independiente de plataformas y orientado al objeto. Permite crear tanto aplicaciones como pequeños programas para Internet, redes internas y cualquier otro tipo de redes distribuidas.

LAN (Local Area Network): LAN Siglas de Local Area Network que en español es Red de Area Local. Computadoras que trabajan entre si en un área pequeña, generalmente oficinas.

Línea Dedicada: Línea privada alquilada a una empresa de telecomunicaciones. Esta puede estar activa las 24 horas del día los 365 días del año.

Link: Hipervínculo con alguna otra página de la misma web o web remota, en multimedia también funciona el término.

Login: Es el nombre de Usario, el cual te permite identificarte en un servidor (Ver Servidor)
sea de tu proveedor de internet, de correo o para el uso de un programa. Nadie mas puede tener tu login, el cual, junto a tu Password (Ver Password) te permitiran hacer uso de ellos.

Mail: Ver E-mail.

Memoria CACHE: Es una memoria similar a la RAM, pero que tiene la particularidad de mantener por mayor tiempo la información; por este motivo, es usada como un método de acceso a los datos más rápido que la memoria RAM. Normalmente una Tarjeta Madre cuenta con 256 Kb y el máximo en la actualidad alcanza a 512 Kb.

Memoria RAM: Corresponde a la sigla del término inglés Random-Access Memory, memoria de acceso aleatorio. Es un dispositivo donde se guardan datos en forma temporal. Esta se ocupa durante la operación de los programas y mientras más grande sea, más fácil y rápido pueden correr los programas.

Mouse o Ratón: Dispositivo que permite transformar los movimientos de la mano del usuario sobre un plano en movimientos de un cursor sobre la pantalla del ordenador, para elegir y activar elementos.

Multimedia: Como su nombre lo dice multimedia es la unión de muchos medios y se utiliza para designar a aquellas presentaciones de productos audiovisuales en donde conviven el texto, la imagen en movimiento, el sonido y la animación. Por ejemplo un CD-ROM de una enciclopedia o una página web en donde están presente todos estos elementos.

Nickname: En español Nickname es sobrenombre, apodo. Sobrenombre que se usa en los chats, correos, grupos de noticias y en general en Internet para ser identificados. Puede ser un sobre apodo registrado y que nadie mas tenga, o ser un sobrenombre que use el que primero entre al lugar.

Nodo: Punto de una red computacional. Puede ser una computadora personal, un servidor o un dispositivo de comunicación (router o enrutador, hub o concentrador, etc).

Página: Documento de hipertexto. La página es cada uno de los elementos que nos puede presentar un cliente Web. Las páginas contienen texto, enlaces, imágenes, y otros elementos multimedia.

Password (Clave de acceso): Password en español es Clave de acceso. El password es la palabra clave, que nadie mas que tu tiene por que saber, que junto a tu Nombre de Usuario o Login, te permite acceder a servicios y programas en
Internet o tu PC.

PORTAL: Se denomina portal a una página que pretende ser para el usuario común y corriente la puerta de entrada al fascinante mundo de Internet. El concepto apareció en Estados Unidos y está definido por una serie de servicios básicos con valor agregado que pretenden fidelizar al usuario para ser su página inicial o referencial. De esta manera casi todos los portales ofrecen acceso a un correo gratuito, noticias y un motor de búsqueda de información entre otras cosas. En la actualidad existe la idea de dividir a los portales en dos categorías. Aquellos denominados portales verticales, que no son otra cosa que páginas especializadas en una materia y portales horizontales, websites con canales de información de múltiples temas. Para terminar vale la pena señalar que una página web cualquiera no es un portal. Esta aclaración la hago por la constante confusión entre los nuevos usuarios.

QuickTime: Formato de video y audio creado por Apple y que soportan tanto Macintoch como Windows.

Red: Dos o más computadoras conectadas entre sí.

Servidor: Programa que permite a un ordenador ofrecer servicios a otro. También se denomina así al equipo que ejecuta el software de servidor. (Administrador)

Software: A diferencia del hardware, es lo que no se ve, es decir los programas y aplicaciones que están guardadas en un disco duro, CD-ROM o disquetes.  Ejemplo: (un programa).

SPAM: Se llama así al envio masivo con correo electrónico, es decir, mandar grandes cantidades de correo o mensajes muy largos a muchos usuarios. Este puede ser enviado a nuestra base de datos “Limpia” con buen resultado. El SPAM no esta penado por la ley pero hay que considerar poner el aviso de “Remover” para no ser considerado como tal.

TCP: Transmission Control Protocol, es uno de los protocolos de comunicaciones sobre los que se basa Internet. Posibilita una comunicación libre de errores entre ordenadores en Internet.

TCP/IP: Transfer Control Protocol / Internet Protocol. Familia de protocolos que hace posible la interconexión y el tráfico de red en Internet. Los dos protocolos más importante son los que dan nombre a la familia, TCP e IP.

URL: Uniform Resource Locator. Utilizado para especificar la dirección de un objeto (archivo, grupo de news, etc.) en la red.

VGA: (Video Graphics Array o Arreglo para Gráficas de Video) Sistema introducido en 1987 por IBM que ofrece diversas formas de usar una pantalla, variando para ello la cantidad de píxeles que emplea. Las resoluciones más usadas son 800 X 600 y actualmente 1024 X 768

Vínculo: Conexión lógica desde una posición en una página web a otro recurso.

Virus: Programa cuyas instrucciones se ejecutan sin que el usuario se dé cuenta. Normalmente están diseñados para causar problemas, como borrar archivos o el disco duro del computador.

WINZIP: Winzip es un utilidad de compresión que permite a los usuarios reducir el tamaño de sus archivos para transferirlos más rápidamente a través de Internet. Esta utilidad también descomprime archivos comprimidos con formatos PKZIP o TAR. ver: ZIP www.winzip.com

Web Master: Operador del sistema de un sitio Web.Es la persona que se encarga de administrar, actualizar la información y contenido de un sitio web.

WWW (World Wide Web): Sistema de Internet para vincular mediante hipertexto en todo el mundo documentos multimedia, permitiendo un fácil acceso, totalmente independiente de la ubicación física, a la información común entre documentos.

ZIP: “Zipear” (es decir, hacer una copia de menor tamaño, pero igual) un archivo mediante “winzip”, el archivo resultante se denomina un archivo “zip”. Suele terminar con la extensión “.zip”. Hacer una compresión de una carpeta o archivo.

Archivos más comunes utilizados en páginas web

.JPG: Es la abreviatura de JPEG, un popular estándar de compresión para fotografías y otras imágenes.

.GIF: Significan Graphics Interchange Format (formato de intercambio de gráficos), un estándar creado por Compu Serve a finales de los 80. Ambos formatos de gráficos son independientes de plataformas, lo que quiere decir que los puede usar en una máquina PC, Mac o UNIX, siempre y cuando usted tenga un visualizador para ellos.

.AVI: Formato de video sumamente pesado, hecho para PC

.BMP: Bitmap, es el formato gráfico más usado para almacenar imágenes en ambiente Windows.

.MPG (abreviatura de MPEG), el cual es independiente de cualquier plataforma, pero requiere su propio reproductor

.MOV y .QT: Para películas QuickTime. Fue desarrollado inicialmente sólo para Macintosh, pero ahora se ejecuta en Windows y UNIX también.

.MP3: Archivo de sonido más popular tanto para Mac como para PCs.

.WAV: El formato de sonido nativo para Windows.

Terminología del Internet en el desarrollo y diseño de páginas web

HTML: Lenguaje de programación básica que se utiliza para desarrollar páginas NO DINAMICAS.

ASP/PHP/ASPNET/CGI/JAVASCRIPT/ADO/BVSCRIPT: Lenguaje de programación avanzado que se utiliza para desarrollar páginas DINAMICAS.

TABLAS: Son utilizadas para el diseño de páginas web con características de precisión en el tamaño de la página.

FRAME/IFRAME: Son ventanas que se acoplan a una página y contienen información distinta al de la pagina principal. También pueden ser utilizadas como ventanas flotantes.

ETIQUETAS: Son divisiones que se utilizan para definir un objeto dentro de una página web, también sirven para asignarles propiedades a dichos objetos, como nombre, tamaño, color, etc.

FORMULARIO: Se utilizan para capturar información de un visitante

LAYERS: Igual que los iframes, son ventanas flotantes.