Home

      Comment post English
x

Select your language

EnglishEspañol

Curso de HTML - Primera Parte


3 people like this


<< VIENE DE CURSO DE HTML - INTRODUCCIÓN

Antes de comenzar a aprender HTML, debemos saber con qué herramientas vamos a trabajar. Primero hay que entender que HTML es un lenguaje interpretado por los navegadores; eso significa que si escribimos correctamente los comandos en el código fuente de un archivo de formato .html o .htm, el contenido de este archivo será visualizado en cualquier navegador Web (por ejemplo Internet Explorer, Mozilla Firefox, Chrome, Safari o Opera).

Si queremos ver cómo está hecha una página Web, podemos hacerlo tocando sobre cualquier punto de ésta con el botón derecho de nuestro mouse, lo que abrirá un menú desplegable con varias opciones, en nuestro caso seleccionaremos Ver Código Fuente; y así se abrirá otra ventana con el código fuente de la página Web que estamos viendo. Quizá en un principio, si no sabemos HTML no entenderemos nada de lo que nos muestra la ventana del código fuente, pero con el tiempo a medida que aprendamos y practiquemos este lenguaje comenzaremos a comprender.

Ya sabemos cómo ver el código fuente de una página Web, ahora debemos saber con qué herramienta podremos hacer nuestras propias páginas. Hay muchos editores, como Dreamweaver por ejemplo, pero en mi opinión la mejor manera de aprender es utilizando una aplicación que todos tenemos en nuestras computadoras, el Bloc de notas. En realidad con esta simple herramienta podemos realizar sitios Web desde los más pequeños y simples, hasta portales de redes sociales de los más complejos, ya que con el Bloc de notas podemos programar en distintos lenguajes.

Bien, ahora es momento de comenzar con HTML. Primero hay que aclarar que su nombre proviene de las siglas de Hypertext Markup Language, que en inglés significa Lenguaje de Marcado de Hipertexto.

El hipertexto no es más que el texto remarcado que si es seleccionado nos redirige a otra página o documento Web; en otras palabras son los hipervínculos o links. Ya que al desarrollarse este lenguaje la característica principal que presentaba era la posibilidad de pasar de un documento a otro de manea sencilla mediante el uso de estos textos remarcados en azul, siendo muy práctico lo que finalmente lo convirtió en el sistema de exploración Web estándar que hasta el día de hoy utilizamos en Internet.

Por lo tanto ya tenemos las herramientas para crear y visualizar nuestras páginas Web.

Los archivos de las páginas Web tienen que ser de tipo .htm o .html, los dos tipos son lo mismo, por lo tanto no habrán diferencias en los documento que vayamos a crear, está en nosotros elegir cualquiera de los dos tipos.

Para guardar un archivo de página Web, vamos al menú Archivo de nuestro Bloc de notas, seleccionamos Guardar como, elegimos un nombre, luego en tipo de archivo cambiamos de Documentos de texto a Todos los archivos; esto último es muy importante, ya que si no seleccionamos el tipo de Todos los archivos, todo lo que hayamos escrito en el código fuente se guardará como archivo de tipo .txt; y nosotros queremos guardarlo como archivo .htm o .html.

Editar HTML con Bloc de notas
Bloc de notas de Windows


Ahora pasaremos a los más importante, los comandos HTML que nos permiten hacer páginas Web.

ELEMENTOS Y ETIQUETAS DE HTML

Cada cosa que queremos mostrar en una página Web es un elemento, o sea que un elemento puede ser un párrafo, un título, una imagen, una lista, un hipervínculo, etc.

Cada elemento está definido por etiquetas y contenido. Las etiquetas son los comandos HTML que especifican lo que queremos mostrar y el contenido puede ser un texto, la dirección de una imagen, la dirección de un hipervínculo, etc.

En HTML las etiquetas deben ser abiertas y cerradas, o sea que se necesita una etiqueta de apertura que indica dónde comienza el elemento y una etiqueta de cierre que indica dónde termina el elemento.

La estructura de definición de elementos HTML es la siguiente:

<nombre-de-etiqueta-de-elemento>Contenido</nombre-de-etiqueta-de-elemento>


Por ejemplo para escribir un párrafo debemos escribir el siguiente código fuente:

<p>Este es un párrafo de ejemplo</p>


Las etiquetas HTML se forman con signos de menor y mayor los cuales rodean el nombre del comando HTML. Por ejemplo <p> es la etiqueta de párrafo. Las etiquetas de cierre utilizan una barra antes del nombre del comando; de esta manera en el caso del párrafo, la etiqueta de cierre es </p>.

Las etiquetas de apertura y cierre deben rodear al contenido del elemento, o sea que en el caso anterior el contenido viene a ser el texto, el cual debe estar rodeado por las etiquetas de apertura y cierre, <p> </p>.

Hay casos de elementos con contenido vacío, esto significa que no requieren etiqueta de apertura y cierre, éstos simplemente se cierran en la primera y única etiqueta; un ejemplo de este tipo de elementos son los saltos de línea:

<br />

El elemento anterior realiza un salto de línea al renglón inmediatamente inferior. El cierre del mismo se realiza con una barra al final de la etiqueta como se muestra en el ejemplo anterior.

Todas las páginas HTML requieren siempre de la presencia de ciertos elementos obligatorios, estos son:

<html>, <head>, <title> y <body>.

El elemento <html> define dónde comienza el documento o página HTML y dónde finaliza.

Entre las dos etiquetas de apertura y cierre <html> y</html> debemos poner el elemento <body> (que significa cuerpo); este elemento es donde se pondrá todo el contenido visual, o sea todo lo que se va a poder ver en la página; el contenido visual debe estar encerrado por una etiqueta de apertura <body> y una de cierre </body>; quedando así:

<html>
<body>

Aquí deben ir todos los elementos visuales de la página, o sea párrafos, imágenes, hipervínculos, etc.

</body>
</html>

Otro elemento necesario es <head>, que significa cabecera; dentro de este elemento se agregan todos los elementos no visuales de la página, o sea todo lo que no se ve en el cuerpo principal del explorador Web; por ejemplo información para servidores, para motores de búsqueda, etc. De eso hablaremos más adelante.

<html>
<head>

Aquí deben ir todos los elementos no visuales de la página, como información para los motores de búsqueda entre otras cosas.



</head>
<body>

Aquí deben ir todos los elementos visuales de la página, o sea párrafos, imágenes, hipervínculos, etc.

</body>
</html>

Otro elemento necesario es el del título de página, el cual aparece en la barra de título de la parte de arriba del explorador o en los más modernos en la pestaña de la página activa. Por ejemplo el título de esta página es Curso de HTML - Primera Parte. El título de una página se define con el elemento <title> el cual debe ir dentro del elemento de cabecera <head>. El texto del título debe ir rodeado de una etiqueta de apertura <title> y otra de cierre </title>.

De esta manera el código fuente de una página Web simple, con lo mínimo indispensable, quedaría así:

<html>

<head>
<title>Este es el título de la página Web</title>
</head>

<body>

<p>Este es el texto de un párrafo que se verá en el cuerpo principal del explorador Web</p>

</body>
</html>

Recuerden que el elemento <p> es el que define párrafos.

Pueden probarlo copiando y pegando el texto del código fuente de arriba en el Bloc de notas y guardando el archivo con el nombre de ejemplo1.html

El código fuente anterior debe hacer que la página Web creada se vea como en la siguiente imagen:

Ejemplo de pagina HTML
Cliquear para ver en grande

Una cosa que hay que recordar siempre es de cerrar los elementos, ya que a pesar que algunas veces pueden verse algunos de los elementos en ciertos navegadores aunque nos olvidemos de cerrarlos; no hay que confiarse; siempre hay que cerrarlos ya que muchos elementos no serán visualizados correctamente.

Otro consejo; las etiquetas de los elementos pueden escribirse en mayúscula o en minúscula; pero, se recomienda escribirlas en minúscula ya que en versiones modernas de HTML, como XHTML (ya se tratará más adelante el tema de las versiones de HTML), es obligatorio que las etiquetas estén escritas en minúscula; por lo tanto para tener compatibilidad en todos los navegadores del futuro es mejor que éstas sean escritas con letras minúsculas.

Las etiquetas HTML pueden tener también atributos, los cuales proveen información adicional acerca de los elementos que definimos. Los atributos siempre se escriben en la etiqueta de apertura, o sea la primera, de la siguiente manera:

<nombre-de-etiqueta atributo="valor">


Un ejemplo es la etiqueta <a> que se utiliza para crear hipervínculos:

<a href="https://www.youbioit.com">Link a Youbioit.com</a>

 

En este caso a es el nombre de la etiqueta del elemento utilizado para crear hipervínculos y href el atributo que provee información acerca de la dirección a la que nos enviará el link. Más adelante se describirá mejor el elemento de hipervínculos <a>, ya que en este momento simplemente lo utilizamos para explicar mejor qué son los atributos.

El valor del atributo siempre debe ser escrito entre comillas. Pueden utilizarse tanto comillas dobles " como comillas simples '; pero es recomendable utilizar las dobles. Las comillas simples se utilizan en aquellos raros casos en los que el valor incluye comillas dobles, por lo tanto para diferenciarlas se utilizan comillas simples, por ejemplo:

name='Tienda "La neuquina" - Indumentarias de todo tipo'

 

Si este no es ese el caso, lo recomendable es utilizar comillas dobles en este formato:

atributo="valor del atributo"


Como sucede con el nombre de las etiquetas, es recomendable que los nombres de atributos estén escritos en letras minúsculas.

Otra cosa acerca de la sintaxis de los atributos en HTML es que hay que escribir el nombre del atributo, el signo = y el valor entre comillas siempre pegados.

Sintaxis Correcta:

atributo="valor del atributo"

 
Sintaxis Incorrecta:

atributo  =  "valor del atributo"

Sintaxis Incorrecta:

atributo  ="valor del atributo"

   

ELEMENTOS HTML

 
1 - ENCABEZADOS EN HTML

Los títulos o encabezados del cuerpo del documento en HTML se definen con las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6> (la h es por header que en inglés significa encabezado). Cada una de estas etiquetas difieren en el tamaño del título que generan. Veamos algunos ejemplos:

<html>

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

<body>

<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>

</body>
</html>

El código fuente anterior daría como resultado los siguientes títulos.

Titulo 1

Título 2

Título 3

En la siguiente imagen se muestra cómo se vería el resultado en un navegador Web:

Encabezados en HTML
Cliquear para ver en grande

La etiqueta <h1> genera los encabezados más grandes mientras que la <h6> genera los títulos más pequeños. Cuanto mayor es el número, menor será el tamaño de fuente.

Las etiquetas <h1> a <h6> no deben ser utilizadas para resaltar grandes cantidades de texto o párrafos enteros, ya que para eso existen otras etiquetas especiales. Deben ser utilizadas solamente para definir títulos; ya que éstos son utilizados por los motores de búsqueda para indexar el contenido de nuestras páginas Web. Si utilizamos las etiquetas <h1> a <h6> con textos muy largos, corremos el riesgo de que los motores de búsqueda no indexen nuestras páginas Web, o las posicionen en puestos bajos de búsqueda.

Es bueno utilizar las etiquetas h para definir titulares o encabezados de artículos, páginas, textos, etc. Por ejemplo el título de una noticia o nota periodística.
 
  
2 - LÍNEAS HORIZONTALES EN HTML

La etiqueta <hr /> define líneas horizontales (la hr es por horizontal line que en inglés significa línea horizontal). Este elemento no requiere etiqueta de cierre y por lo tanto se cierra en la primera y única etiqueta que utiliza para crear líneas rectas.

Veamos un ejemplo:

<html>

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

<body>

<p>Este es el párrafo 1 del ejemplo</p>
<hr />
<p>Este es el párrafo 2 del ejemplo</p>
<hr />
<p>Este es el párrafo 3 del ejemplo</p>

</body>
</html>

El código fuente anterior define tres párrafos separados por líneas horizontales. Pueden probarlo copiando y pegando el código fuente en el Bloc de notas, guardándolo como archivo de tipo .htm o .html y probándolo en un explorador Web.

El resultado debería verse como en la siguiente imagen:

Lineas horizontales en HTML
Cliquear para ver en grande

 

3 - COMENTARIOS EN HTML

Si necesitamos guiarnos dentro del código fuente, explicando qué define cada pedazo de código fuente, podemos utilizar comentarios. Los comentarios son omitidos por el navegador Web y solamente son visibles en el código fuente de la página. Éstos pueden servir en códigos fuentes muy largos y confusos para guiarnos.

Los comentarios HTML se escriben entre medio de <!-- y -->

<!-- Éste es un comentario -->

Pueden utilizarse todos los comentarios que sean necesarios, ya que como se mencionó anteriormente éstos no son visualizados por el navegador Web y no modifican el aspecto de nuestras páginas.

4 - PÁRRAFOS EN HTML

Como se mencionó en algunos ejemplos anteriores los párrafos de texto se definen con la etiqueta <p>. Cada párrafo de un documento debe estar encerrado por las etiquetas de apertura y cierre <p> y </p>.

Veamos un ejemplo:

<html>

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

<body>

<p>Este es el párrafo 1 del ejemplo</p>
<p>Este es el párrafo 2 del ejemplo</p>
<p>Este es el párrafo 3 del ejemplo</p>

</body>
</html>

Los párrafos se encuentran separados entre sí por un renglón intermedio. Recordemos que siempre debemos cerrar cada párrafo. El resultado del código fuente anterior debería verse en los navegadores Web como en la siguiente imagen:

Parrafos en HTML
Cliquear para ver en grande

5 - SALTOS DE LÍNEA EN HTML

Si necesitamos realizar un salto de línea a un nuevo renglón sin salirnos del párrafo utilizamos la etiqueta <br />. La br es por break, que en inglés significa pausa, poner fin, quebrar o romper.

Veamos un ejemplo:

<html>

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

<body>

<p>Este es el párrafo 1 del ejemplo.<br />
Este sigue siendo el párrafo 1.</p>

<p>Este es el párrafo 2 del ejemplo.<br />
Este sigue siendo el párrafo 2.</p>

<p>Este es el párrafo 3 del ejemplo.<br />
Este sigue siendo el párrafo 3.</p>

</body>
</html>

Esto dará como resultado lo siguiente:

Este es el párrafo 1 del ejemplo.
Este sigue siendo el párrafo 1.

Este es el párrafo 2 del ejemplo.
Este sigue siendo el párrafo 2.


Este es el párrafo 3 del ejemplo.
Este sigue siendo el párrafo 3.

 

Y que en los navegadores Web deberá verse como en la siguiente imagen:

Saltos de línea en HTML
Cliquear para ver en grande


Cada vez que querramos agregar saltos de línea o nuevos renglones debemos utilizar la etiqueta <br />; todo nuevo renglón que agreguemos en el código fuente sin la etiqueta <br /> será omitido por el explorador Web. Por lo tanto si requerimos un salto de por ejemplo 2 renglones, tenemos que incluir en el código fuente 2 etiquetas seguidas, de la siguiente manera: <br /><br />. Si necesitamos 3 renglones ponemos
<br /><br /><br />.

DARLE FORMATO AL TEXTO

A continuación veremos las etiquetas que nos permiten darle formato al texto; con estas etiquetas podemos presentar el texto en negrita, cursiva, texto grande, texto pequeño, etc.

1 - TEXTO EN NEGRITA

Para obtener texto en negrita debemos utilizar la etiqueta <b>.

Por ejemplo:

<p><b>Este texto está en negrita.</b>Este texto no está en negrita.</p>

Esto daría como resultado lo siguiente:
 

Este texto está en negrita. Este texto no está en negrita.

 

2 - TEXTO EN CURSIVA

Para obtener texto en cursiva debemos utilizar la etiqueta <i>.

Por ejemplo:

<p><i>Este texto está en cursiva.</i>Este texto no está en cursiva.</p>

Esto daría como resultado lo siguiente:
 

Este texto está en cursiva. Este texto no está en cursiva.

 
3 - RESALTAR EL TEXTO

Podemos hacer resaltar el texto utilizando las etiquetas <strong> y <em>.

La etiqueta <strong> (que significa fuerte en inglés) resalta más al texto que la etiqueta <em> (su nombre proviene de emphasis que en inglés significa énfasis). Una cosa a tener en cuenta es que en los actuales navegadores Web, el texto resaltado con <strong> se ve en negrita, exactamente igual que con <b>; y el texto resaltado con <em> se ve en cursiva, exactamente igual que con <i>; sin embargo se recomienda que para obtener texto en negrita se utilice <b> y para cursiva <i>; en lugar de <strong> y <em>, ya que en un futuro, es posible que los navegadores Web muestren de manera distinta a los textos formateados con estas últimas dos etiquetas. Por lo tanto debemos utilizar <strong> y <em> simplemente para resaltar una parte del texto, mientras dejamos el resto del mismo no resaltado.

Veamos un ejemplo:

<html>

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

<body>

<p><b>Este texto está en negrita.</b></p>

<p><i>Este texto está en cursiva.</i></p>

<p><em>Este texto está resaltado.</em></p>

<p><strong>Este texto está resaltado más que el anterior.</strong></p>

</body>
</html>

El resultado sería el siguiente:
 

Resaltar texto
Cliquear para ver en grande


Como se ve, los textos con <b> y <strong> dan resultados similares al igual que <i> y <em>.

Las etiquetas de formato pueden combinarse, así por ejemplo podemos tener texto en negrita y cursiva.

4 - OTRAS ETIQUETAS DE FORMATO DE TEXTO

Existen varias etiquetas que dan distinto formato al texto definido. Primero veremos las definiciones de cada una de estas etiquetas y luego veremos un ejemplo que incluye el código fuente de cada etiqueta:

La etiqueta <big> le da tamaño grande al texto definido.

La etiqueta <small> le da tamaño más pequeño al texto definido.

La etiqueta <sub> define texto en subíndice, o sea texto de tamaño más pequeño y ubicado ligeramente más abajo que el resto, como se suele utilizar en matemáticas por ejemplo: b2.

La etiqueta <sup> define texto en superíndice, o sea texto de tamaño más pequeño y ubicado ligeramente más arriba que el resto, como se suele utilizar en matemáticas para definir potencias; por ejemplo 22.

Las etiquetas <del> e <ins> se utilizan para definir un texto tachado y de corrección respectivamente; por ejemplo como se utiliza en casos de ofertas en las que figura el precio de antes y el de ahora. <del> tacha el texto e <ins> muestra el texto subrrayado como si fuese insertado para corregir el texto anterior; estas etiquetas suelen utilizarse en conjunto.

La etiqueta <code> define texto con estilo de código fuente de computadora.

La etiqueta <kbd> define texto de teclado o máquina de escribir.

La etiqueta <tt> define texto de estilo de teletipo.

La etiqueta <pre> permite definir texto preformateado con estilo similar al de la etiqueta <code>; esto significa que si al texto definido le agregamos varios espacios o saltos de línea en el código -sin utilizar <br />- éstos aparecerán tal cual se los escribió en el código fuente. Recordemos que en HTML el texto común acepta solamente un espacio entre palabras y por más que agreguemos dos o más espacios, siempre se mostrará uno; lo mismo sucede con los saltos de línea, ya que en el texto común la única manera de agregar saltos de línea es mediante la etiqueta <br />. Con la etiqueta <pre> se acepta o muestra más de un espacio, mientras que los saltos de línea se pueden realizar sin <br />; el único detalle es que el estilo de texto es similar al definido por la etiqueta <code>.

La etiqueta <var> define texto en formato similar al utilizado para mostrar variables en el código fuente de editores de lenguajes de programación; en muchos navegadores Web el estilo resultante es similar al que define <code>.

La etiqueta <samp> define texto en estilo de ejemplo de código fuente; el resultado es similar al de <code>.

La etiqueta <abbr> sirve para definir abreviaturas, las cuales cuales se muestran subrrayadas por una línea de puntos y si se apoya el puntero del mouse por encima del texto abreviado aprace una leyenda, generalmente utilizada para explicar qué significa la abreviatura del texto definido. La leyenda se define con el atributo title.

Por ejemplo:

La <abbr title="Universidad Tecnológica Nacional">UTN</abbr> es líder en la enseñanza de carreras de tecnología.

La etiqueta <address> define texto en formato de dirección postal. En la mayoría de los navegadores Web aparece en cursiva con un espacio de un renglón antes y después del bloque de texto.

La etiqueta <blockquote> define texto en formato de cita; por ejemplo se puede utilizar para citar frases. En la mayoría de los navegadores Web, el bloque de texto definido con esta etiqueta aparece con un espacio de sangría adelante.

Veamos un ejemplo con todas las etiquetas explicadas anteriormente:

<html>

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

<body>

<p><big>Este texto se verá más grande.</big></p>

<p><small>Este texto se verá más pequeño.</small></p>

<p>x<sub>1</sub> + x<sub>2</sub> = x</p>

<p>El resultado de la potencia de 2<sup>10</sup> es igual a 1024.</p>

<p>El precio de este pantalón es: Antes - <del>$100</del>. Ahora - <ins>$80</ins>.</p>

<p><code>Este texto tiene formato de código fuente de computadora.</code></p>

<p><kbd>Este texto tiene formato de letra de teclado o máquina de escribir.</kbd></p>

<p><tt>Este texto tiene formato de teletipo.</tt></p>

<pre>Este texto admite más de un      espacio
       así como saltos
            de línea.
</pre>

<p><var>Este texto tiene formato de variable de código fuente.</var></p>

<p><samp>Este texto tiene formato de ejemplo de código fuente de programa.</samp></p>

<p>La <abbr title="Universidad Tecnológica Nacional">UTN</abbr> es líder en la enseñanza de carreras de tecnología y de ciencias exactas tanto en la República Argentina como en América en general.</p>

<address>
Dirección: Belgrano 2300 - Capital Federal<br/>
República Argentina
<br/>
Tel: 4999-9999<br/>
</address>

<blockquote>Principio de la cita larga. Esta es una cita con espacios de sangrías agregados. Esta es una cita con espacios de sangrías agregados. Esta es una cita con espacios de sangrías agregados. Esta es una cita con espacios de sangrías agregados. Esta es una cita con espacios de sangrías agregados. Esta es una cita con espacios de sangrías agregados. Esta es una cita con espacios de sangrías agregados. Fin de la cita larga.</blockquote>

</body>
</html>


Esto se vería de la siguiente manera:

Etiquetas para dar formato a texto
Cliquear para ver en grande

 

CÓMO AGREGAR IMÁGENES


El texto es muy útil para dar información, pero convengamos que lo que le da belleza estética a una página Web son las imágenes, así que a continuación veremos la etiqueta <img> y sus atributos que nos permiten agregar imágenes.

Lo mínimo indispensable que hay que agregar en una etiqueta <img> es lo siguiente:

<img src="imagen.jpg" />

Como se muestra en el ejemplo anterior, <img /> requiere solamente una etiqueta la cual se cierra al final de la misma. También requiere un atributo obligatorio, src, el cual proviene de "source" que significa fuente en inglés. Se trata del atributo que define el nombre de la imagen a agregar.

Es importante saber la ubicación de la imagen; si se encuentra en la misma carpeta que el archivo HTML que estamos editando, solamente hay que indicar el nombre del archivo, pero si se encuentra en otra carpeta hay que indicar la dirección completa con todos los nombres de carpetas.

Otro atributo opcional pero útil es alt, el cual sirve para definir un texto alternativo que aparece en caso que la imagen no se haya cargado. De esta manera, si por alguna razón la imagen no se ve o tarda mucho en cargar, en su lugar se muestra este texto alternativo. La etiqueta <img /> con el atributo alt se ve de la siguiente manera:

<img src="imagen.jpg" alt="Imagen 1" />

Otros dos atributos opcionales, pero muy importantes, son los que definen el ancho y alto de la imagen que agregamos. El atributo width define el ancho y height define el alto.

Veamos un ejemplo:

<img src="imagen.jpg" alt="Imagen 1" width="400" height="200" />

La etiqueta anterior agrega una imagen llamada imagen.jpg, con texto alternativo "Imagen 1", un ancho de 400 pixels y un alto de 200 pixels.

Se puede especificar el mismo tamaño original de la imagen u otro distinto. Por ejemplo se pueden especificar dimensiones mayores y así estirar la imagen o se puede lograr el efecto contrario de mostrar una imagen con dimensiones inferiores a las originales.

Una cosa que hay que tener en cuenta es que los usuarios que visitarán nuestra página utilizarán distintas resoluciones de pantalla, por lo tanto no todos verán de la misma manera las imágenes que agreguemos a la página. Si se utilizan imágenes para hacer partes estructurales de una página, como un marco o una sombra; por ejemplo si queremos que éstas siempre se vean de la misma forma en todas las resoluciones de pantalla es conveniente utilizar porcentaje en lugar de pixels al definir el ancho de las imágenes.

<img src="imagen.jpg" alt="Imagen 1" width="80%" />

La imagen anterior ocupará el 80% del ancho de la página en la que esté contenida.

Otra cosa que se puede hacer con las imágenes es alinearlas respecto a un texto adyacente. Por ejemplo podemos lograr que el texto aparezca a la derecha de un texto o a la izquierda, o arriba o en el medios; también podemos lograr que la imagen sea recorrida por los costados por el texto, etc. Esto se logra mediante el uso del atributo align; y algunos de los valores pueden ser left, right, top, middle o bottom, que significan izquierda, derecha, arriba, medio, fondo.

En el siguiente ejemplo sustituyamos el valor imagen.jpg del atributo src con el nombre de una imagen que poseamos.

<html>

<head>
<title>Ejemplo con imágenes</title>
</head>

<body>

<p><img src="imagen.jpg" alt="imagen de ejemplo" align="left" />La imagen está alineada a la izquierda de este texto, por lo tanto el texto recorrerá la imagen por el lado derecho de la misma.La imagen está alineada a la izquierda de este texto, por lo tanto el texto recorrerá la imagen por el lado derecho de la misma. La imagen está alineada a la izquierda de este texto, por lo tanto el texto recorrerá la imagen por el lado derecho de la misma. La imagen está alineada a la izquierda de este texto, por lo tanto el texto recorrerá la imagen por el lado derecho de la misma.</p>

<p><img src="imagen.jpg" alt="imagen de ejemplo" align="right" />La imagen está alineada a la derecha de este texto, por lo tanto el texto recorrerá la imagen por el lado izquierdo de la misma.La imagen está alineada a la derecha de este texto, por lo tanto el texto recorrerá la imagen por el lado izquierdo de la misma.La imagen está alineada a la derecha de este texto, por lo tanto el texto recorrerá la imagen por el lado izquierdo de la misma.La imagen está alineada a la derecha de este texto, por lo tanto el texto recorrerá la imagen por el lado izquierdo de la misma.La imagen está alineada a la derecha de este texto, por lo tanto el texto recorrerá la imagen por el lado izquierdo de la misma.</p>

<p><img src="imagen.jpg" alt="imagen de ejemplo" align="top" />La imagen está alineada arriba con respecto al texto, lo cual significa que el texto comenzará en la esquina superior derecha de la imagen.</p>

<p><img src="imagen.jpg" alt="imagen de ejemplo" align="middle" />La imagen está alineada en el medio con respecto al texto adyacente a la misma. Esto significa que el texto comenzará en el medio del lado derecho.</p>

<p><img src="imagen.jpg" alt="imagen de ejemplo" align="bottom" />La imagen está alineada abajo con respecto al texto. La imagen está alineada abajo con respecto al texto. La imagen está alineada abajo.</p>

</body>
</html>

Esto se vería de la siguiente manera:

Agregar imagenes en paginas Web
Cliquear para ver en grande

Recordemos que debemos utilizar las imágenes con moderación, ya que son archivos aparte del documento HTML, y que cuantas más imágenes agreguemos más tardará en cargarse todo. Otra cosa a tener en cuenta es que procuremos que éstas no ocupen un tamaño grande de disco (en bytes), ya que utilizan espacio del ancho de banda. Por ejemplo si una página Web está compuesta por un documento HTML que ocupa 100 KB y cinco imágenes de 200 KB cada una; al cargar la página con un explorador deberemos bajar para verla 1.1 MB de datos (1 MB de las cinco imágenes y 100 KB del archivo .htm o .html)

Los formatos de imágenes más utilizados al crear páginas Web son .jpg, .png y .gif, siendo estos dos últimos más utilizados para crear botones o logos de sitios Web ya que permiten transparencias.
 

HIPERVÍNCULOS

Quizá uno de los elementos más importantes del lenguaje HTML son los hipervínculos, los cuales permiten a los usuarios saltar de una página a otra, de un sitio a otro o incluso de un punto a otro dentro de una misma página. Los hipervínculos pueden estar definidos en texto o imágenes, de esta manera si tocamos un texto o imagens con hipervínculo saltaremos al punto que indica el mismo.

Los hipervínculos se definen mediante la etiqueta <a>. Para que un texto o imagen tenga un hipervínculo la etiqueta que lo define debe estar rodeada por las etiquetas de apertura y cierre <a>.

El atributo de <a> que define la dirección a la que apuntará el hipervínculo se llama href. El valor que se le introduce a href es una URL (nombre técnico que se utiliza para referirse a las direcciones Web, proveniente de las siglas de Uniform Resource Locator, que signifia Localizador Uniforme de Recursos).

Veamos un ejemplo:
 

<html>

<head>
<title>Ejemplo con hipervínculo</title>
</head>

<body>

<p><a href="https://www.youbioit.com">Este texto es un hipervínculo</a></p>

</body>
</html>

 

El ejemplo anterior daría como resultado un hipervínculo hacia www.youbioit.com, como se ve a continuación:

Este texto es un hipervínculo

Hay dos maneras de definir la URL de un hipervínculo mediante una dirección absoluta o una dirección relativa. La dirección absoluta incluye la dirección completa y la relativa la dirección de un documento en relación a la ubicación del documento en el que nos encontramos.

SI por ejemplo nos encontramos en http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento1.html y queremos definir un hipervínculo a http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento2.html; hay dos maneras de hacerlo:

Utilizando la dirección absoluta: <a href="http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento2.html">Texto</a>
Utilizando la dirección relativa: <a href="documento2.html">Texto</a>

Si nos encontramos en http://www.ejemplo.com/carpeta1/documento1.html y queremos definir un hipervínculo a http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento2.html; hay dos maneras de hacerlo:

Utilizando la dirección absoluta: <a href="http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento2.html">Texto</a>
Utilizando la dirección relativa: <a href="carpeta2/carpeta3/documento2.html">Texto</a>

Si nos encontramos en http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento1.html y queremos definir un hipervínculo a http://www.ejemplo.com/carpeta1/documento2.html; hay dos maneras de hacerlo:

Utilizando la dirección absoluta: <a href="http://www.ejemplo.com/carpeta1/carpeta2/carpeta3/documento2.html">Texto</a>
Utilizando la dirección relativa: <a href="../../carpeta3/documento2.html">Texto</a>

Con ../ nos dirigimos a una carpeta atrás.

Un atributo opcional de <a> es target, el cual nos permite abrir el hipervínculo en una pestaña nueva del explorador, si le agregamos el valor "_blank".

Por ejemplo:
 

<html>

<head>
<title>Ejemplo con hipervínculo</title>
</head>

<body>

<p><a href="https://www.youbioit.com" target="_blank">Este texto define un hipervínculo que se abre en una pestaña nueva</a></p>

</body>
</html>

 
El valor por omisión del atributo target en la etiqueta <a>, es "_self", (en inglés significa sí mismo), y lo que hace es abrir las páginas a las que nos dirigen los enlaces en la misma pestaña o ventana. Si no se indica dicho valor en la etiqueta mencionada, su link se abrirá en la misma pestaña, ya que es el valor por omisión, por lo que no es obligatorio ponerlo; sin embargo si por motivos de claridad se prefiere su presencia, puede incluirse.

Si queremos crear un hipervínculo hacia otro punto de la misma página en la que nos encontramos, por ejemplo para dirigirnos a una subsección del documento que estamos leyendo debemos utilizar un marcador. Los marcadores se definen con el atributo de <a> name. Estos marcadores son invisibles y simplemente definen un punto al que podemos saltar dentro de la página. Para dirigirnos al punto donde se encuentra el marcador utilizamos el atributo href y como valor el nombre del marcador anteponiendo un signo #.

Por ejemplo si queremos definir un marcador de nombre Marcador1 y un hipervínculo hacia el mismo debemos escribir el siguiente código fuente:
 

<html>

<head>
<title>Ejemplo con hipervínculo</title>
</head>

<body>

<p><a href="#Marcador1">Este texto define un hipervínculo que nos lleva al punto donde se encuentra el marcador invisible llamado Marcador1.</a></p>

<p>Texto 1</p>

<p><a name="Marcador1">El hipervínculo anterior nos trae a este punto</a></p>

</body>
</html>

 

También podemos dirigirnos a un marcador ubicado en otra página; simplemente debemos poner en el atributo href la dirección URL de la página donde se encuentra el marcador, seguido por # y el nombre del marcador.

Por ejemplo si un marcador llamado Marcador1 se encuentra en la página ubicada en www.ejemplo.com/documento1.html, para definir el hipervínculo que nos lleve al mismo debemos escribir el siguiente código fuente.

<a href="http://www.ejemplo.com/documento1.html#Marcador1">Este texto define un hipervínculo que nos lleva al punto donde se encuentra el marcador invisible llamado Marcador1.</a>

Para crear hipervínculos con imágenes en lugar de utilizar texto rodeado por la etiqueta <a>, utilizamos una imagen. En donde dice nombredeimagen.jpg deben reemplazarlo por el nombre verdadero de una imagen que tengan.

 

<html>

<head>
<title>Ejemplo con hipervínculo de imagen</title>
</head>

<body>

<a href="https://www.youbioit.com"><img src="nombredeimagen.jpg" alt="Imagen de ejemplo" /></a>

</body>
</html>

 
También podemos crear hipervínculos a direcciones mail, los cuales al ser tocados, abren automáticamente la aplicación de mail de nuestro sistema operativo. Para crearlo debemos agregar en href como valor mailto: seguido de la dirección de mail.

<html>

<head>
<title>Ejemplo con hipervínculo a dirección de mail</title>
</head>

<body>

<a href="mailto:alguien@ejemplo.com">Esto abrirá el programa de mail de nuestro sistema operativo con la dirección de mail agregada automáticamente</a>

<a href="mailto:alguien@ejemplo.com?Subject=Hola%20amigo">Esto abrirá el programa de mail de nuestro sistema operativo con la dirección de mail y asunto agregados automáticamente.</a>

</body>

</html>

En el segundo ejemplo vemos que agregamos el asunto del mail utilizando la palabra Subject separada de la dirección por un signo ? . Cada palabra que forma el texto del asunto debe estar separada por %20 y no por espacios, de lo contrario no funcionará correctamente, así que recordemos utilizar siempre %20 en el asunto de mailto.

LISTAS

Otro elemento muy utilizado en el diseño de páginas Web es el de las listas. En HTML existen tres tipos de listas: las listas numeradas u ordenadas, las no numeradas o no ordenadas, y las listas de definición.

Las listas no ordenadas se ven como el siguiente ejemplo:

  • Ítem 1
  • Ítem 2
  • Ítem 3
  • Ítem 4
  • Ítem 5

Para definir una lista no ordenada se utiliza la etiqueta <ul> y cada ítem se define con la etiqueta <li>. Veamos el código fuente necesario para agregar un lista como la anterior.

<html>

<head>
<title>Ejemplo de lista</title>
</head>

<body>

<ul>
<li>
Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ul>

</body>
</html>

 

Como se ve en el código fuente anterior tanto la lista así como cada ítem requieren una etiqueta de apertura y de cierre separadas, es muy importante respetar esto al igual que con otras etiquetas HTML, siempre hay que cerrar cada ítem y la lista con la etiqueta de cierre.

Otra cosa a tener en cuenta es que las listas agregan sangría automáticamente a cada ítem para que la misma quede destacada.

Las listas ordenadas se ven como el siguiente ejemplo:
 

  1. Ítem 1
  2. Ítem 2
  3. Ítem 3
  4. Ítem 4
  5. Ítem 5

Para definir una lista ordenada se utiliza la etiqueta <ol> y al igual que en las listas no ordenadas, cada ítem se define con la etiqueta <li>. Veamos el código fuente necesario para agregar un lista como la anterior.

Como se ve en el código fuente anterior, la estructura de las listas ordenadas es igual a la de las no ordenadas y lo único que cambia es el nombre de la etiqueta que define qué tipo de lista queremos agregar.

Vale la pena aclarar que <ul> proviene de Unordered List que en inglés significa Lista no ordenada, mientras que <ol> proviene de Ordered List que significa Lista ordenada y <li> proviene de List Item que significa Ítem de lista.

Hay un atributo que nos permite cambiar el tipo de listas ordenadas y no ordenadas, se trata del atributo type. Por ejemplo podemos tener una lista ordenada con letras en lugar de números o una lista no ordenada con cuadrados o círculos blancos en lugar de círculos negros.

Veamos un ejemplo:

<html>

<head>
<title>Ejemplo de lista</title>
</head>

<body>

<h4>Lista no ordenada con ítems de círculos negros</h4>
<ul type="disc">
<li>
Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ul>

<h4>Lista no ordenada con ítems de círculos blancos</h4>
<ul type="circle">
<li>
Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ul>

<h4>Lista no ordenada con ítems cuadrados</h4>
<ul type="square">
<li>
Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ul>

<h4>Lista ordenada con ítems de numerados</h4>
<ol>
<li>
Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ol>

<h4>Lista ordenada con ítems de letras mayúsculas</h4>
<ol type="A">
<li>
Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ol>

<h4>Lista ordenada con ítems de letras mayúsculas</h4>
<ol type="A">
<li>
Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ol>

<h4>Lista ordenada con ítems de letras minúsculas</h4>
<ol type="a">
<li>
Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ol>

<h4>Lista ordenada con ítems de números romanos en mayúscula</h4>
<ol type="I">
<li>
Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ol>

<h4>Lista ordenada con ítems de números romanos en minúscula</h4>
<ol type="i">
<li>
Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ol>

</body>
</html>

 
Esto se vería de la siguiente manera en un navegador Web:

Como agregar listas en paginas Web
Cliquear para ver en grande

Si no se especifica el tipo de ítem de lista, por omisión las listas no ordenadas contienen ítems con círculos negros y las ordenadas están enumeradas.


LISTAS DE DEFINICIÓN

Las listas de definición contienen ítems con una descripción de cada uno. Una lista de definición se ve así:

Ítem 1
Descripción del ítem 1
Ítem 2
Descripción del ítem 2
Ítem 3
Descripción del ítem 3
Ítem 4
Descripción del ítem 4
Ítem 5
Descripción del ítem 5
 
<html>

<head>
<title>Ejemplo de lista</title>
</head>

<body>

<dl>
<dt>
Ítem 1</dt>
<dd>Descripción de ítem 1</dd>
<dt>Ítem 2</dt>
<dd>Descripción de ítem 2</dd>
<dt>Ítem 3</dt>
<dd>Descripción de ítem 3</dd>
<dt>Ítem 4</dt>
<dd>Descripción de ítem 4</dd>
<dt>Ítem 5</dt>
<dd>Descripción de ítem 5</dd>
</dl>

</body>
</html>

 
La etiqueta que define una lista de definición es <dl>, la etiqueta que define un ítem es <dt> y <dd> es la descripción.

CONTINÚA EN EL CURSO DE HTML - SEGUNDA PARTE >>


3 people like this

Share
Related Articles

Photo Gallery
Photoalbum: 

Curso de HTML


Suggested posts
Follow Youbioit






Comments

Post new comment

The content of this field is kept private and will not be shown publicly.