Nos anoticiamos de este nuevo editor html a través del weblog genbeta, donde encontrarán una buena referencia del programa y enlaces para desacargarlo.

Lo compartimos porque de acuerdo a lo comentado es de sencilla utilización, gratuito, de código abierto, multiplataforma y se puede personalizar en español.

Si el tema que elegiste posibilita el uso de música de fondo para acompañar la lectura, aquí te damos las instrucciones:

El Explorer soporta sonidos a partir de la versión 2.0 y hay que usar la simple etiqueta <BGSOUND SRC="cancion.wav" LOOP=”x">, siendo x el número de veces que se ha de repetir la canción o sonido. Si queremos que se reproduzca indefinidamente debemos introducir LOOP=”infinite” o LOOP=”n-1”. Si LOOP=”x” se omite el sonido se reproducirá una vez.

NOTA: la extensión de los archivos de música a utilizar puede ser .wav o .mid

GRUPO:
Carina Bravo, Elisabet Santos, Leandro Mancini, Belén López Mujica

En estas dos páginas que adjunto abajo podrán encontrar numerosos consejos y trucos del lenguaje HTML para que su website quede mejor presentada y más próxima a lo que tienen en mente. Ojalá les sirva y suerte a todos en el final!

trucos y consejos 1

trucos y consejos 2

Para todos los que estén en problemas con el trabajo practico de html, le recomendamos un pequeño hallazgo, consistente en un libro que lleva por título

Html 4, guía en 10 minutos (...o menos)

Para darle movimiento a la página y al mismo tiempo destacar un texto de manera atractiva visualmente.

miren que lindo

los pasos a seguir son

<p><span style="background-color: #FFFFFF"><font color="#FFFFFF">

<marquee bgcolor="#3366FF" style="font-weight: bold" scrolldelay="80">texto</marquee>

</font></span></p>

Suerte!!!

En este pequeño texto van a encontrar quizas otra forma de colocar un texto al lado de una foto, con los códigos TOP / MIDDLE / BOTTOM

Los mismo indican como se alineará el texto que siga a la imagen.
align = TOP / MIDDLE / BOTTOM
TOP alinea el texto con la parte superior de la imagen.
MIDDLE con la parte central.
BOTTOM con la parte inferior.

hspace = margen
Indica el numero de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.

vspace = margen
Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.

La pagina de la cuál saque esta info es: http://alumnos.unsl.edu.ar/html/basico/, espero que les sirva la info o que utilizen esta pagina para otras dudas que surjan.

Acá transcribimos algo que encontramos para poder justificar un texto dentro del código HTML.

La gran mayoría de los programas de diseño web, llamese Microsoft Front Page o Macromedia DreamWeaver ( los más conocidos ) ninguno nos posibilita justificar un texto. Es decir podemos hacerlo pero de forma manual, igual no es nada del otro mundo, sino mira atentamente.

Para justificar un párrafo deberas incluir en la propiedad align: justify. Esta última propiedad es la que permite alinear el texto, es este último caso lo justificaría.

El código sería este:

Lanzan el sucedor del Mp3
El formato MP3 tiene más de 10 años de antigüedad, por lo que necesitaba una actualización. Thomson Multimedia y el instituto alemán Fraunhofer han lanzado un reemplazo, MP3pro, el cual reduce a la mitad el tamaño del archivo en relación con el formato anterior.

El resultado sería este:

Lanzan el sucedor del Mp3
El formato MP3 tiene más de 10 años de antigüedad, por lo que necesitaba una actualización. Thomson Multimedia y el instituto alemán Fraunhofer han lanzado un reemplazo, MP3pro, el cual reduce a la mitad el tamaño del archivo en relación con el formato anterior.

En caso de que desee justificar una porción de texto por ejemplo dentro de una celda de una tabla, puedo usar lo siguiente:

< div align="justify" > el texto que quiero justificar < /div >

La dirección de donde sacamos esto es http://www.gamarod.com.ar/articulos/justificar_un_parrafo.asp. Quizas puedan encontrar allí otras cosas que les sirvan.

Listas regulares ordenadas

Este tipo de listas muestran una serie de elementos ordenados en una secuencia jerárquica lógica. Se construyen partiendo de la pareja de etiquetas base <OL>...</OL> (Ordered List=Lista Ordenada).

Estas etiquetas deben siempre ir en parejas apertura-cierre y contienen en su interior un número variable de etiquetas <LI>...</LI> , que son las que van a definir los diferentes elementos textuales de las lista.

Atributos de la etiqueta <OL>.

Estos atributos permiten configurar el aspecto que va a tener la lista.

• type="tipo": define la secuencia a utilizar en la lista, en su orden natural lógico.

  El parámetro type puede tomar los valores:

  • type="1": define una lista ordenada mediante números enteros consecutivos seguidos de un punto.
    1. Primero
    2. Segundo
    3. Tercero

    <ol type="1">
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
    </ol>

  • type="A": define una lista ordenada mediante letras mayúsculas consecutivas seguidas de un punto.
    1. Primero
    2. Segundo
    3. Tercero

    <ol type="A">
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
    </ol>

  • type="a": define una lista ordenada mediante letras minúsculas consecutivas seguidas de un punto.
    1. Primero
    2. Segundo
    3. Tercero

    <ol type="a">
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
    </ol>

  • type="I": define una lista ordenada mediante números romanos en mayúscula consecutivos seguidos de un punto.
    1. Primero
    2. Segundo
    3. Tercero

    <ol type="I">
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
    </ol>

  • type="i": define una lista ordenada mediante números romanos en minúscula consecutivos seguidos de un punto.
    1. Primero
    2. Segundo
    3. Tercero

    <ol type="i">
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
    </ol>

• start="x": define el primer el comienzo de la serie de elementos de la lista, el primero de la que va a aparecer. Los valores del parámetro "x" son siempre números enteros a partir de 1. Si no se especifica este atributo, la lista empezará siempre por el primer elemento.
  
  
  
  
  4. Cuarto
  
  
  5. Quinto
  
  
  6. Sexto

  <ol type="1" start="4">
  <li>Cuarto</li>
  <li>Quinto</li>
  <li>Sexto</li>
  </ol>

  
  
  4. Cuarto
  
  
  5. Quinto
  
  
  6. Sexto

  <ol type="A" start="4">
  <li>Cuarto</li>
  <li>Quinto</li>
  <li>Sexto</li>
  </ol>

Listas regulares ordenadas

Este tipo de listas muestran una serie de elementos sin un orden en una jerárquico. Comunmente se las denomina viñetas. Se construyen partiendo de la pareja de etiquetas base <UL>...</UL> (Unordered List=Lista Sin ordenar).

Igual que las anteriores estas etiquetas deben siempre ir en parejas apertura-cierre y contienen en su interior un número variable de etiquetas <LI>...</LI> , que son las que van a definir los diferentes elementos textuales de las lista.

Atributos de la etiqueta <UL>.

Estos atributos permiten configurar el aspecto que va a tener la lista.

• type="tipo": define la viñeta a utilizar en la lista.

  El parámetro type puede tomar los valores:

  • type="disc": define una lista con una viñeta circular negra rellena.
    1. Primero
    2. Segundo
    3. Tercero

    <ol type="disc">
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
    </ol>

  • type="circle": define una lista con una viñeta circular negra hueca.
    1. Primero
    2. Segundo
    3. Tercero

    <ol type="circle">
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
    </ol>

  • type="square": define una lista con una viñeta cuadrada negra rellena.
    1. Primero
    2. Segundo
    3. Tercero

    <ol type="square">
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
    </ol>

  
  

Si alguien quiere agregar una transición entre página y página sólo es necesario incluir esta línea en el <head> junto con los META TAGS de tu página.

Fundido
<meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">

Circle in

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=2)">

Circle out

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=3)">

Wipe up

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=4)">

Wipe down

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=5)">

Wipe right

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=6)">

Wipe left

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=7)">

Es posible cambiar la duración de la transición en la opción "Duration" en este ejemplo figura como "Duration=3". Estos ejemplos están planteados para que las transiciones se produzcan al comienzo, "Page-Enter", si queremos agregar el código para realizar la transición a la salida, tenemos que cambiar por "Page-Exit"

<meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=3.0)">

Fuente: buesa.net

Enlaces

La etiqueta encargada de establecer un enlace es A y /A

Dentro de esta etiqueta se encuentra el atributo HREF en el que se indica la dirección donde está el enlace y el tipo de protocolo utilizado (HTTP, MAILTO, etc.)

Dialógica

<a href="http://www.dialogica.com.ar/">Dialógica</a>

Así vemos que el texto “Dialógica” contiene un enlace a la dirección de esta página web y que cuando pulsemos sobre el texto enlazaremos a la misma.

Pero hay que tener en cuenta que de esta forma se cambiará nuestra página por la página enlazada, cuando lo conveniente es mantenerla, así que en ves de cambiar abriremos una nueva ventana. Para esto usaremos el comando TARGET y la variable blank.

target=”_blank”

Dialógica

<a href="http://www.dialogica.com.ar/"
target="_blank">Dialógica</a>

Cuando se encuentra un enlace es importante saber a que sitio se va a ir o cual es el contenido del artículo, para esto lo referenciamos con TITLE.

Dialógica

<a href="http://www.dialogica.com.ar/"
target="_blank" title="Potrero de weblogs sobre educación, comunicación, cultura, periodismo y política">Dialógica</a>

Si en cambio quisiéramos enlazar a una dirección de correo y que se abra el programa que por defecto utiliza el usuario pondremos la siguiente etiqueta.

Contáctese con Dialógica

<a href="mailto:dialogica@dialogica.com.ar"
title="mail de dialógica">Contáctese con Dialógica</a>

Anclas o enlaces internos

Para acceder a una posición determinada del documento HTML, debemos primero especificar el lugar del documento al que queremos acceder.

Volver al título

<a name="ancla01">Título</a>

<p>texto</p>

<a href="#ancla01">Volver al título</a>

También podemos acceder a anclas situadas en otros documentos. Para ello añadiremos el nombre del ancla al URL.

Ir a Líneas, saltos de líneas y comentarios ocultos

<a href="http://www.dialogica.com.ar/unr/postitulo/medialab/
archives/000458.php#ancla01-apuntes2" target="_blank" title="Apuntes de HTML (primera parte)">Ir a Líneas, saltos de líneas y comentarios ocultos</a>

Imágenes

Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta IMG

<img src="http://www.dialogica.com.ar/unr/postitulo/medialab/
archives/fotos/html.jpg" alt="HTML (Hyper Text Markup Language)"/>

El parámetro SRC especifica el nombre del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF y el JPG. Las últimas versiones de Netscape y Explorer aceptan también el formato PNG.

ALT es similar a TITLE que utilizamos en los enlaces.

Existen dos atributos que, aunque opcionales, conviene indicar siempre: la altura y la anchura del gráfico en pixels. De este modo, el navegador puede mostrar un recuadro del tamaño de la imagen mientras la va leyendo de la red y así poder mostrar el resto de la página correctamente mientras tanto.

<img src="http://www.dialogica.com.ar/unr/postitulo/medialab/
archives/fotos/html.jpg" alt="HTML (Hyper Text Markup Language)" width="96" height="76"/>

También podemos asignarle un borde con el parámetro BORDER y que el texto envuelva a la foto con ALIGN (alineación derecha o izquierda) y HSPACE (distancia en pixels entre la foto y el texto)

<img src="http://www.dialogica.com.ar/unr/postitulo/medialab/
archives/fotos/html.jpg" alt="HTML (Hyper Text Markup Language)" width="96" height="76" border="0" align="left" hspace="10"/>

Fondos

Dentro de la etiqueta BODY podemos definir una serie de parámetros

BACKGROUND: Permite definir un gráfico de fondo para la página.

BGCOLOR: Permite definir el color de fondo de la página.

TEXT: Cambia el color del texto.

LINK: Cambia el color de un enlace no visitado (por defecto azul).

VLINK: Cambia el color de un enlace ya visitado (por defecto púrpura).

ALINK: Cambia el color que toma un enlace mientras lo estamos pulsando (por defecto rojo).

<body bgcolor="#CCCCCC" background="imagenes/fondo01.jpg" text="#330000" link="#006699"
vlink="#CC6600" alink="#FFCC66">

Formato de Texto

Con la etiqueta FONT podemos atribuirle a un texto una serie de indicaciones

COLOR: La manera de especificarle el color es común a todas las etiquetas HTML, o bien indicando el nombre, si es un color normal, o bien especificando el porcentaje de rojo, verde y azul (código RGB) del mismo. Los colores reconocidos son los siguientes:

Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua.

Texto en rojo

<font color="red">Texto en rojo</font>

Para el RGB se utiliza código hexadecimal: 0 a 9 y A a F

Texto verde

<font color="#00CC00">Texto verde</font>

SIZE: Parámetro para indicar el tamaño. Puede ser de 1 a 7

Tamaño de Texto

<font size="3">Tamaño de Texto</font>

FACE: Parámetro para indicar la tipografía. Como en principio no tenemos manera de saber que tipo de letra tiene instalado el ordenador del usuario que está viendo nuestras páginas, podemos indicar más de uno separado por comas. Si el navegador no encuentra ninguno seguirá utilizando el que tiene por defecto.

Fuente

<font face="Times New Roman">Fuente</font>

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 ^indice

  <sub> Sub _Indice

  sub _indice

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

<!-- Aquí escribo un comentario sobre el código -->

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