Lucy Ramos J: 2012

miércoles, 16 de mayo de 2012

Etiquetas HTML

Etiquetas
Apertura	Acción	Atributos	Cierre
< !	Comentario.	Ninguno	-->
<A>	Hipervínculo.	HREF, NAME, REL, REV, TITLE	</A>
<ADDRESS>	Formato para dirección del autor.	Ninguno	</ADDRESS>
<BASE>	Url del autor; contexto del documento.	HREF	</BASE>
<BASEFONT SIZE>	Tamaño de la fuente base.	Ninguno	NO
<BGSOUND>	Sonido de fondo.	SRC, LOOP.	NO - Internet Explorer
<BIG>	Aumenta el tamaño.	Ninguno	</BIG>
<BLINK>	Hace parpadear el texto.	Ninguno	</BLINK> - Netscape
<BLOCKQUOTE>	Da formato con sangría a un párrafo	Ninguno	</BLOCKQUOTE>
<BODY>	Cuerpo del documento.	BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK	</BODY>
<BR>	Retorno de línea.	CLEAR: Se utiliza en combinación con ALIGN de IMAGE.	NO
<CAPTION>	Posición de la leyenda en una tabla.	ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER	</CAPTION>
<CENTER>	Centrar.	Ninguno	</CENTER>
<CITE>	Formato para citas en itálicas.	Ninguno	</CITE>
<CODE>	Formato en tipo código.	Ninguno	</CODE>
<DD>	Definiciones marcadas, para Lista de Definiciones <DL>.	Ninguno	NO
<DFN<	Formato en itálica.	Internet Explorer	</DFN<
<DIR>	Lista de directorio, con elementos marcados con <LI>.	Ninguno	</DIR>
<DL>	Lista de Definiciones, con términos marcados con <DT> y definiciones marcadas con <DD>.	Ninguno	</DL>
<DT>	Términos marcados, para Lista de Definiciones <DL>.	Ninguno	NO
<EM>	Formato enfatizado en itálica.	Ninguno	</EM>
<EMBED>	Sonido de Fondo.	SRC, WIDTH, HEIGHT, AUTOSTART, LOOP.	NO - Netscape
<FONT>	Definición de la fuente.	SIZE, COLOR. Internet Explorer: FACE.	</FONT>
<FORM>	Para ingreso de datos del usuario en un formulario.	ACTION, METHOD	</FORM>
<H1 ...H6>	Tamaño de letras del 1 al 6.	HTML 3.0: LEFT, CENTER, RIGHT	</H1 .../H6>
<HEAD>	Encabezamiento del documento.	BASE, TITLE, ISINDEX, NEXTID, META	</HEAD>
<HR>	Línea horizontal.	NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR	NO
<HTML>	Al principio y al fin de todo documento.	HEAD, BODY	</HTML>
<I>	Itálica (Cursiva).	Ninguno	</I>
<IMG>	Cargar imágenes.	ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE	NO
<INPUT>	Define un objeto de ingreso en un formulario.	TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED	</INPUT>
<ISINDEX>	Indica que existe un index en el server para el documento.	Netscape: PROMPT	NO
<ISMAP>	Activa la selección de imágenes para el usuario.	Ninguno	NO
<KBD>	Formato monoespaciado.	Ninguno	</KBD>
<LI>	Ítem de lista.	Netscape: VALUE, TYPE	NO
<LISTING>	Listados	Ninguno. Obsoleto.	</LISTING>
<LIT>	Literal. Como PRE, pero usa letra proporcional.	Ninguno	</LIT>
<MARQUEE>	Marquesina.	ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY.	</MARQUEE> - Internet Explorer
<MENU>	Lista menú.	Ninguno	</MENU>
<META>	Metainformación ubicada en HEAD.	EQUIV, CONTENT, NAME	NO
<NEXTID>	Es un parámetro que identifica al documento.	NO	NO
<NOBR>	Elimina los saltos de líneas.	Ninguno	NO
<OL>	Lista ordenada, con elementos marcados con <LI>.	TYPE, START, VALUE.	</OL>
<OPTION>	Opción de selección dentro de un formulario.	VALUE, SELECTED VALUE	NO
<P>	Retorno de línea, con un espacio.	Ninguno	NO
<P ALIGN>	Alineación de texto.	LEFT, CENTER, RIGHT	</P>
<PLAINTEXT>	Pasaje de texto plano.	Ninguno. Obsoleto.	</PLAINTEXT>
<PRE>	Visualiza el texto en su formato original.	WIDTH	</PRE>
<S>	Texto tachado.	Ninguno	</S>
<SAMP>	Formato tipo ejemplo.	Ninguno	</SAMP>
<SELECT>	Para selección de opciones dentro de un formulario.	NAME, SIZE, MULTIPLE	</SELECT>
<SMALL>	Disminuye el tamaño.	Ninguno	</SMALL>
<STRONG>	Formato enfatizado más fuerte que <EM>.	Ninguno	</STRONG>
<SUB>	Subíndice.	Ninguno	</SUB>
<SUP>	Superíndice.	Ninguno	</SUP>
<TABLE>	Tabla.	BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR	</TABLE>
<TD>	Celdas de una fila en una tabla, dentro de <TR>.	ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH	</TD>
<TEXTAREA>	Área para ingreso de texto dentro de un formulario.	NAME, ROWS, COLS.	</TEXTAREA>
<TH>	Título de Tabla.	ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH	</TH>
<TITLE>	Título dentro de HEAD.	Ninguno	</TITLE>
<TR>	Fila de una Tabla.	ALIGN, VALIGN	</TR>
<TT>	Formato tipo máquina.	Ninguno	</TT>
<UL>	Lista no ordenada, con elementos marcados con <LI> .	COMPACT, TYPE	</UL>
<VAR>	Formato tipo variable.	Ninguno	</VAR>
<WBR>	Se usa con NOBR para una sección que deba ser separada.	Ninguno	NO
<XMP>	Similar a PRE.	Ninguno	</XMP>

martes, 15 de mayo de 2012

Estructura básica de un documento HTML

Estructura básica de un documento HTML

Todos los documentos Html tienen la estructura que se muesta a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).

<HTML>
    <HEAD>
        <TITLE>Título de la página</TITLE>
        ...
    </HEAD>

    <BODY>
        Aquí iría el contenido de la página
    </BODY>
</HTML>

Vamos a analizar más detenidamente las distintas secciones que componen la página
Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:

<meta name="description" content="Información sobre el Centro,las enseñanzas que se pueden cursar, los departamentos didácticos">
<meta name="keywords" content="educación,enseñanza,instituto, profesores, alumnos">

En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.
La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y </title>).

El título de la página debe describir su contenido por ejemplo:
<TITLE>Colegio Público de Villamañán - Ámbito de Influencia - </TITLE>
no valdría en cambio
<TITLE>Página de Inicio</TITLE> ya que esto no dice nada por si solo

Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas

<script language="JavaScript">

</SCRIPT>

El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.
El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> suele contener algunos atributos, a saber:

BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.
Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>
Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar en: Paleta de Colores
TEXT, parametro usado para definir el color del texto por omision. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.
LINK, VLINK, ALINK, parámetros usados para especificar el color por omision de: texto con enlace, enlace ya visitado y enlace activo.
Los colores por omision son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.
BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usanda como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).
Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">
Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el directorio completo donde están nuestras páginas, desde C:\ a C:\webs por ejemplo, la ruta especificada debe seguir siendo válida.
Por ejemplo si la página desde la que hacemos el enlace se encuentra en el directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se encuentra en gifs, se debe poner:
<BODY BACKGROUND="gifs/fondo.gif">

Si la página estuviese en ejemplos se pondría:<BODY BACKGROUND="../gifs/fondo.gif">

martes, 8 de mayo de 2012

Adobe Dreamweaver

Dreamweaver

Dreamweaver es la herramienta de diseño de páginas web más avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre se encontrarán en este programa razones para utilizarlo, sobretodo en lo que a productividad se refiere.

Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y soporta gran cantidad de tecnologías, además muy fáciles de usar:

Hojas de estilo y capas
Javascript para crear efectos e interactividades
Inserción de archivos multimedia...

Además es un programa que se puede actualizar con componentes, que fabrica tanto Macromedia como otras compañias, para realizar otras acciones más avanzadas.

En resumen, el programa es realmente satisfatorio, incluso el código generado es de buena calidad. La unica pega consiste en que al ser tan avanzado, puede resultar un poco difícil su manejo para personas menos experimentadas en el diseño de webs.

Dreamweaver ha evolucionado mucho en su versión 4, que incluye soporte para la creación de páginas dinámicas de servidor en ASP, con acceso a bases de datos (versión Ultradev) y una mayor integración con otras herramientas de Macromedia como Fireworks.

Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la plataforma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine.

Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.

Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C).

No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código.

Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.

Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASP, ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.

Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.

También podría decirse que, para un diseño más rápido y a la vez fácil, podría complementarse con Fireworks en donde se podría diseñar un menú u otras creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola en donde ya llevará los vínculos para dicho sitio.