Rosario, Santa Fe, Argentina, Viernes 08 de Agosto de 2003

Algunos apuntes sobre HTML (Primera parte)

El HTML (Hyper Text Markup Language) es un lenguaje de programación interpretado, es decir que cualquier página web que realicemos no puede ejecutarse de forma autónoma, sino que debe ser descifrado por un programa denominado navegador o browser (Mozilla Firefox, Internet Explorer, Netscape, Opera). Veremos que simplemente es un documento escrito en código ASCII que no incluye ningún formato.

Para editar HTML solo necesitamos un programa que guarde el texto en código ASCII como el Bloc de Notas, donde hay que guardarlo con extensión htm o html.

Aunque para producir un sitio web utilizaremos editores de HTML (Macromedia Dreamweaver, UpToDown -gratuito-), creemos conveniente aprender y entender la lógica de este lenguaje.

Es aconsejable que la primera página la denominemos "index", porque de esta forma se cargará automáticamente al escribir nuestra dirección de internet. El nombre del archivo inicial será index.html, de esta forma cuando en el navegador tipeo la dirección de un sitio:

http://www.dialogica.com.ar

y automáticamente va al archivo index de esta dirección.

HTML trabaja con etiquetas (tags) que se identifican por llevar los signos "<" ">". Normalmente un comando tiene dos variantes, una de inicio y otra de cierre que actúan sobre el elemento situado entre ellas, por ejemplo:

<html>
</html>

Donde indican que todo el contenido situado entre ellas es un documento que se ajusta a las normas establecidas para HTML.

A continuación debemos incluir la cabecera de la página y su cierre correspondiente: head

Dentro de la cabecera o encabezado se incluyen aquellos elementos de la página que no alteran el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como veremos más adelante.

<html>
<head>
<title>Página Personal de Fernando</title>
<meta name="author" content="Fernando">
<meta name="generator" content="Bloc de notas>
</head>

</html>

Además del título de la página, uno de los elementos que se pueden incluir aquí son los META. Entre otras cosas, sirven para indicar propiedades de la página.

AUTHOR - Autor del sitio.
GENERATOR - Herramienta utilizada para producir el sitio.
CLASSIFICATION - Palabras que permiten clasificar el sitio dentro de un buscador jerárquico.
KEYWORDS - Palabras claves por las que se encontrará el sitio en los buscadores.
DESCRIPTION - Descripción del contenido del sitio.

Ahora veremos la etiqueta body que encierra los elementos visibles del documento.

<html>
<head>
<title>Página Personal de Fernando</title>
<meta name="author" content="Fernando">
<meta name="generator" content="Bloc de notas>
</head>

<body>
<h1 align="center">Mi presentación</h1>
<br />
<br />

<p>En este sitio me presentaré.</p>

<hr width="%50">
<img src="foto01.jpg" border="0">

</body>
</html>

Formato del párrafo

<p> Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto.

<p>Aquí va el párrafo.</p>

Dentro de esta etiqueta podemos utilizar align="x" Con este atributo se indica su alineación. Puede ser left (izquierda), right (derecha) o center (centrado).

<p align="left">Aquí va el párrafo.</p>

<blockquote> Produce un párrafo propio para citas (blockquote = cita de bloque), aunque también se lo utiliza para resaltar párrafos.

En esta etiqueta se puede agregar el atributo cite y especificar la URL de la fuente citada.

<blockquote cite="http://www.sitio.com.ar/>Párrafo citado</blockquote>

Cabeceras

El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras

Cabecera 1

<h1>Cabecera 1</h1>

Cabecera 2

<h2>Cabecera 2</h2>

Cabecera 3

<h3>Cabecera 3</h3>

Cabecera 4

<h4>Cabecera 4</h4>

Cabecera 5

<h5>Cabecera 5</h5>

Cabecera 6

<h6>Cabecera 6</h6>

Estas etiquetas se pueden definir como de formato de párrafo pero por su importancia he prefirido tratarlas aparte. No resulta recomendable utilizarlas para aumentar o disminuir el tamaño del tipo de letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir correctamente en secciones nuestra página, tal y como se hace en un documento de texto normal.

Formateo del texto

Estilos lógicos: marcas que indican que una palabra o frase tiene una connotación especial.
<em> denota énfasis. Generalmente se representa con letra cursiva.

<em>Texto con em</em>

<strong> denota énfasis fuerte. Generalmente en negrita.

<strong>Texto con strong</strong>

<code> muestra como una fuente monoespaciada, generalmente Courier.

<code>Texto con code</code>
Estilos físicos: Modifican la presentación real del texto.

<b> Negrita

<b>negrita</b>

<i> Itálica

<i>itálica</i>

<u> Subrayada

<u>subrayada</u>

<s> ~~Tachada~~

<s>tachada</s>

<sup> Super ^indice

super <sup>indice</sup>

<sub> Sub _Indice

sub <sub>indice</sub>

<tt> Teletipo o monoespaciada

<tt>teletipo o monoespaciada</tt>

Acrónimos

Antes de ver el código es conveniente que diferenciemos entre una abreviatura y un acrónimo. La diferencia es que en la primera no se lee la palabra que se crea con la forma abreviada, se traduce su significado. Ej. Lic., se lee licenciado o Sr. se lee señor. En cambio un acrónimo se lee la palabra que se crea con la forma abreviada o bien las siglas que la componen, tal como está escrita, por ejemplo, "FBI" no es pronunciable, leemos cada una de las siglas que componen la forma abreviada, la leemos como "Efe - be - i" y, "ONU", si es pronunciable, la leemos como "onu".

Acrónimo

Ejemplo: ONU

<acronym title="Organización de las Naciones Unidas">ONU</acronym>

-Líneas, saltos de líneas y comentarios ocultos

<hr> Inserta una línea horizontal.

A esta podemos aplicarle los siguientes atributos.

width="x" o width="%x" Se emplea para indicar el ancho que debe tener en la ventana del navegador, se puede expresar en píxeles (si se quiere exácto) o en porcentaje (que varíe proporcionalmente según el ancho de la resolución de pantalla)
size="x" Permite indicar en pixel qué grosor debe tener la línea.
align="x" Con este atributo se indica su alineación. Puede ser left (izquierda), right (derecha) o center (centrado)
noshade Elimina el efecto de sombra y tridemensional de la línea que tiene por defecto.

<hr width="%50" align="left" noshade>

<br /> Salto de línea.

<h1 align="center">Mi presentación</h1> <br />

 Comentarios del programador que no se visualizan en el frontend, pero que son útiles para dejar marcas y "pistas".

<html>
<head>
<title>Página Personal de Fernando</title>
<meta name="author" content="Fernando">
<meta name="generator" content="Bloc de notas>
</head>

<body>
<h1 align="center">Mi presentación</h1>
<br />
<br />

<p>En este sitio me presentaré y les contaré que cosa son de mi <strong>agrado</strong>.</p>

<hr width="%50" align="left" noshade>
<img src="foto01.jpg" border="0">

</body>
</html>

Editado por Fernando Irigaray a las 04:06 PM |
Comentarios (1) | TrackBack (0) | Archivado en: [ HTML ]

Trackback Pings

URL de TrackBack para esta entrada:
http://www.dialogica.com.ar/MT3/retrucando.cgi/405

Comentarios

"Traspasamos el espejo, entramos a la caja negra de códigos..." la promesa de ser Chefs en el restaurant de la web se está cumpliendo. Pero como el lenguaje html es específico y no somos programadores no está demás recordarnos en clase si algo va encomillado, con o sin espacio entre caracteres, etc. para no incurrir en errores salvables durante nuestro trabajo ante la pc. La clase de hoy: muy didáctica.

Publicado por: Pablo Donadello Mayo 7, 2005 12:49 PM

Publicar un comentario

Enviar por mail url del posteo

Optimizado para 800 x 600
Navegador Mozilla Firefox