Presentación HTML
View more presentations from 5032985.
miércoles, 16 de junio de 2010
Definición de HTML
(Hyper Text Mark-up Language o Lenguaje de Marcas de Hipertexto). Lenguaje desarrollado por el CERN que sirve para modelar texto y agregarle funciones especiales (por ej. hipervínculos). Es la base para la creación de páginas web tradicionales.
El texto se modela a partir del uso de etiquetas o tags. También se pueden agregar scripts al código fuente html (generalmente JavaScript, PHP, etc.).
Por lo general los diseñadores utilizan herramientas gráficas WYSIWYG para la creación de páginas web, las cuales generan el código fuente html automáticamente (ver Editores Web).
Junto con el código HTML se enlazan otros recursos como imágenes y sonidos, que se incluyen en archivos separados. Igualmente existe el MHTML que permite incorporar ciertos recursos dentro del archivo html.
Es un formato abierto que fue originalmente diseñado basado sobre las etiquetas SGML sin énfasis en las marcas rigurosas.
El texto se modela a partir del uso de etiquetas o tags. También se pueden agregar scripts al código fuente html (generalmente JavaScript, PHP, etc.).
Por lo general los diseñadores utilizan herramientas gráficas WYSIWYG para la creación de páginas web, las cuales generan el código fuente html automáticamente (ver Editores Web).
Junto con el código HTML se enlazan otros recursos como imágenes y sonidos, que se incluyen en archivos separados. Igualmente existe el MHTML que permite incorporar ciertos recursos dentro del archivo html.
Es un formato abierto que fue originalmente diseñado basado sobre las etiquetas SGML sin énfasis en las marcas rigurosas.
Un poco de historia
Historia del HTML
La primera descripción de HTML disponible públicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. Describe 22 elementos comprendiendo el diseño inicial y relativamente simple de HTML. Trece de estos elementos todavía existen en HTML 4.
Berners-Lee consideraba a HTML una ampliación de SGML, pero no fue formalmente reconocida como tal hasta la publicación de mediados de 1993, por la IETF, de una primera proposición para una especificación de HTML: el boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual incluía una Definición de Tipo de Documento SGML para definir la gramática. El boceto expiró luego de seis meses, pero fue notable por su reconocimiento de la etiqueta propia del navegador Mosaic usada para insertar imágenes sin cambio de línea, reflejando la filosofía del IETF de basar estándares en prototipos con éxito. Similarmente, el boceto competidor de Dave Raggett HTML+ (Hypertext Markup Format) (Formato de marcaje de hipertexto), de 1993 tardío, sugería, estandarizar características ya implementadas tales como tablas.
La primera descripción de HTML disponible públicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. Describe 22 elementos comprendiendo el diseño inicial y relativamente simple de HTML. Trece de estos elementos todavía existen en HTML 4.
Berners-Lee consideraba a HTML una ampliación de SGML, pero no fue formalmente reconocida como tal hasta la publicación de mediados de 1993, por la IETF, de una primera proposición para una especificación de HTML: el boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual incluía una Definición de Tipo de Documento SGML para definir la gramática. El boceto expiró luego de seis meses, pero fue notable por su reconocimiento de la etiqueta propia del navegador Mosaic usada para insertar imágenes sin cambio de línea, reflejando la filosofía del IETF de basar estándares en prototipos con éxito. Similarmente, el boceto competidor de Dave Raggett HTML+ (Hypertext Markup Format) (Formato de marcaje de hipertexto), de 1993 tardío, sugería, estandarizar características ya implementadas tales como tablas.
Marcado HTML
El HTML consta de varios componentes vitales, incluyendo elementos y sus atributos, tipos de data, y la declaración de tipo de documento.
Elementos
Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej.
El marcado estructural describe el propósito del texto. Por ejemplo,
El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo,
El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla
Atributos
La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML). De todas maneras, dejar los valores sin comillas es considerado poco seguro. En contraste con los pares nombre-elemento, hay algunos atributos que afectan al elemento simplemente por su presencia (tal como el atributo ismap para el elemento img)
Elementos
Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej.
<nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (p.ej. <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.El marcado estructural describe el propósito del texto. Por ejemplo,
<h2>Golf</h2> establece a "Golf" como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una manera similar al título "Marcado HTML" al principio de esta sección. El marcado estructural no define cómo se verá el elemento, pero la mayoría de los navegadores web han estandarizado el formato de los elementos. Un formato específico puede ser aplicado al texto por medio de hojas de estilo en cascada (CSS, cascade style sheets).El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo,
<b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita, pero no indica qué deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de <b>negrita</b> e <i>itálica</i>, existen elementos que se ven de la misma manera pero tienen una naturaleza más semántica: <strong>enfásis fuerte</strong> y <em>énfasis</em>. Es fácil ver cómo un lector de pantalla debería interpretar estos dos elementos. Sin embargo, son equivalentes a sus correspondientes elementos presentacionales: un lector de pantalla no debería decir más fuerte el nombre de un libro, aunque éste esté en itálicas en una pantalla. La mayoría del marcado presentacional ha sido desechada con HTML 4.0, en favor de las hojas de estilo en cascada.El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla
<a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace. Por ejemplo, un enlace a la Wikipedia sería de la forma <a href=”es.wikipedia.org”>Wikipedia</a>. También se pueden crear enlaces sobre otros objetos, tales como imágenes <a href=”enlace”><img src=”imagen” /></a>.Atributos
La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML). De todas maneras, dejar los valores sin comillas es considerado poco seguro. En contraste con los pares nombre-elemento, hay algunos atributos que afectan al elemento simplemente por su presencia (tal como el atributo ismap para el elemento img)
Etiquetas HTML Básicas
Etiquetas HTML Básicas
Todas ellas van entre <> en las dos partes de la etiqueta, sustitución de *:
Marcas Básicas
*html* y */html* Al principio y al final de todo documento.
*head* y */head* Cabecera del documento. Dentro del head se ponen las
etiquetas:
*title* y */title* indica el título de la página para el navegador.
*meta*" permite aportar metainformación al documento, para su mejor
identificación e indexación por los motores de búsqueda. Hay distintos tipos:
*meta name="description" content="Frase descriptiva de los contenidos de la
página"*
meta name="keywords" content="Palabras clave que resuman la temática de
los contenidos de la página”
*meta name="author" content="Nombre/s del autor/es de la página"*
Tras cerrar el head el se pone la etiqueta:
*body* y */body* Dentro de esta etiqueta se insertan los contenidos del documento
El cierre de la etiqueta */body* se coloca justo antes del cierre */html*
Formato de textos:
*b* y */b* negrita (también sirve la etiqueta *strong*… */strong*)
*i* y */i* cursiva (también sirve la etiqueta *em*…*/em*)
*u* y */u* subrayado
*font size=”X”* …… */Font* marca el tamaño de los caracteres, donde X es un
valor del 1 a 7, o un valor relativo (+ 1-7).
*font color=”#XXYYZZ”* …… */Font* define el color del texto, donde XXYYZZ es
un valor formado por letras y números que indica el color.
*font face=”arial”* …… */Font* determina el tipo de la fuente.
La etiqueta *Font* puede incluir los tres parámetros (tamaño, fuente y color):
*font size=X color=#XXYYZZ face=fuente escogida* …… */Font*
*pre* preformateado. Respeta espacios, saltos de línea y los retornos utilizados.
*blink* hace parpadear el texto (no para Internet Explorer)
Propiedades de la página
La etiqueta *body* puede llevar incluida información sobre las propiedades de la
página:
*body bgcolor="#xxyyzz"* define el color de fondo de la página.
*body text="#xxyyzz"* define el color por defecto del texto en la página.
*body link="#xxyyzz"* define el color de los enlaces.
*body vlink="#xxyyzz"* define el color de los enlaces visitados.
*body alink="#xxyyzz"* define el color de los enlaces activos.
*body background="imagen.gif"* establece una imagen para el fondo de la
página.
Todos estos parámetros se pueden agrupar en una única etiqueta *body*:
*body bgcolor="#xxyyzz" text="#xxyyzz" link="#xxyyzz" vlink="#xxyyzz"
alink="#xxyyzz"*
*!-- comentarios --* Sirve para anotar aclaraciones 'privadas' del autor de la
página. Lo que se escribe dentro de esta etiqueta es ignorado por el navegador y
no se muestra en la página.
Formato de párrafos
*p* salto de párrafo */p*
*br* salto de línea
*blockquote* */blockquote* sangrado.
*center* centrar el texto.
*p align=center* párrafo centrado.
*p align=left* párrafo alineado a la izquierda.
*p align=right* párrafo alineado a la derecha.
Creación de listas
Lista no numerada:
*ul*
*li*primer elemento de la lista*/li*
*li*segundo elemento de la lista*/li*
*li*tercer elemento de la lista*/li*
*/ul* cierra lista
lista numerada:
*ol*
*li*primer elemento de la lista*/li*
*li*segundo elemento de la lista*/li*
*/ol* cierra lista.
Lista de glosario o definición:
*dl*
*dt* término que se va a definir */dt*
*dd* definición del término */dd*
*/dl* cierra lista.
Líneas horizontales separadoras:
*hr* línea horizontal.
*hr width="x%"* anchura de la línea en porcentaje.
*hr width=x* anchura de la línea en píxeles.
*hr size=x* altura de la línea en píxeles.
*hr align=center* línea alineada en el centro.
*hr align=left* línea alineada a la izquierda.
*hr align=right* línea alineada a la derecha.
*hr noshade* línea sin efecto de sombra.
Imágenes
*img src="dirección de la imagen” "* indica la ruta de la imagen.
*img ... border=”X"* establece un borde de X pixels en torno a la imagen.
*img ... height="XX" width="YY"* establece un tamaño de la imagen (altura y
anchura) en pixels.
*img ... alt="texto explicativo"* se muestra un texto al pasar el cursor sobre la imagen.
*img ... align="bottom"* alineación inferior del texto respecto de la imagen.
*img ... align="middle"* alineación del texto en el medio de la imagen.
*img ... align="top"* alineación superior del texto respecto de la imagen.
*img ... align="left"* alineación izquierda de la imagen en el párrafo.
*img ... align="right"* alineación derecha de la imagen en el párrafo.
*img ... hspace=X* espacio horizontal entre la imagen y el texto.
*img ... vspace=y* espacio vertical entre la imagen y el texto.
Hay muchas más, pero estas son las más básicas y las primeras a la hora de aprender HTML.
Todas ellas van entre <> en las dos partes de la etiqueta, sustitución de *:
Marcas Básicas
*html* y */html* Al principio y al final de todo documento.
*head* y */head* Cabecera del documento. Dentro del head se ponen las
etiquetas:
*title* y */title* indica el título de la página para el navegador.
*meta*" permite aportar metainformación al documento, para su mejor
identificación e indexación por los motores de búsqueda. Hay distintos tipos:
*meta name="description" content="Frase descriptiva de los contenidos de la
página"*
meta name="keywords" content="Palabras clave que resuman la temática de
los contenidos de la página”
*meta name="author" content="Nombre/s del autor/es de la página"*
Tras cerrar el head el se pone la etiqueta:
*body* y */body* Dentro de esta etiqueta se insertan los contenidos del documento
El cierre de la etiqueta */body* se coloca justo antes del cierre */html*
Formato de textos:
*b* y */b* negrita (también sirve la etiqueta *strong*… */strong*)
*i* y */i* cursiva (también sirve la etiqueta *em*…*/em*)
*u* y */u* subrayado
*font size=”X”* …… */Font* marca el tamaño de los caracteres, donde X es un
valor del 1 a 7, o un valor relativo (+ 1-7).
*font color=”#XXYYZZ”* …… */Font* define el color del texto, donde XXYYZZ es
un valor formado por letras y números que indica el color.
*font face=”arial”* …… */Font* determina el tipo de la fuente.
La etiqueta *Font* puede incluir los tres parámetros (tamaño, fuente y color):
*font size=X color=#XXYYZZ face=fuente escogida* …… */Font*
*pre* preformateado. Respeta espacios, saltos de línea y los retornos utilizados.
*blink* hace parpadear el texto (no para Internet Explorer)
Propiedades de la página
La etiqueta *body* puede llevar incluida información sobre las propiedades de la
página:
*body bgcolor="#xxyyzz"* define el color de fondo de la página.
*body text="#xxyyzz"* define el color por defecto del texto en la página.
*body link="#xxyyzz"* define el color de los enlaces.
*body vlink="#xxyyzz"* define el color de los enlaces visitados.
*body alink="#xxyyzz"* define el color de los enlaces activos.
*body background="imagen.gif"* establece una imagen para el fondo de la
página.
Todos estos parámetros se pueden agrupar en una única etiqueta *body*:
*body bgcolor="#xxyyzz" text="#xxyyzz" link="#xxyyzz" vlink="#xxyyzz"
alink="#xxyyzz"*
*!-- comentarios --* Sirve para anotar aclaraciones 'privadas' del autor de la
página. Lo que se escribe dentro de esta etiqueta es ignorado por el navegador y
no se muestra en la página.
Formato de párrafos
*p* salto de párrafo */p*
*br* salto de línea
*blockquote* */blockquote* sangrado.
*center* centrar el texto.
*p align=center* párrafo centrado.
*p align=left* párrafo alineado a la izquierda.
*p align=right* párrafo alineado a la derecha.
Creación de listas
Lista no numerada:
*ul*
*li*primer elemento de la lista*/li*
*li*segundo elemento de la lista*/li*
*li*tercer elemento de la lista*/li*
*/ul* cierra lista
lista numerada:
*ol*
*li*primer elemento de la lista*/li*
*li*segundo elemento de la lista*/li*
*/ol* cierra lista.
Lista de glosario o definición:
*dl*
*dt* término que se va a definir */dt*
*dd* definición del término */dd*
*/dl* cierra lista.
Líneas horizontales separadoras:
*hr* línea horizontal.
*hr width="x%"* anchura de la línea en porcentaje.
*hr width=x* anchura de la línea en píxeles.
*hr size=x* altura de la línea en píxeles.
*hr align=center* línea alineada en el centro.
*hr align=left* línea alineada a la izquierda.
*hr align=right* línea alineada a la derecha.
*hr noshade* línea sin efecto de sombra.
Imágenes
*img src="dirección de la imagen” "* indica la ruta de la imagen.
*img ... border=”X"* establece un borde de X pixels en torno a la imagen.
*img ... height="XX" width="YY"* establece un tamaño de la imagen (altura y
anchura) en pixels.
*img ... alt="texto explicativo"* se muestra un texto al pasar el cursor sobre la imagen.
*img ... align="bottom"* alineación inferior del texto respecto de la imagen.
*img ... align="middle"* alineación del texto en el medio de la imagen.
*img ... align="top"* alineación superior del texto respecto de la imagen.
*img ... align="left"* alineación izquierda de la imagen en el párrafo.
*img ... align="right"* alineación derecha de la imagen en el párrafo.
*img ... hspace=X* espacio horizontal entre la imagen y el texto.
*img ... vspace=y* espacio vertical entre la imagen y el texto.
Hay muchas más, pero estas son las más básicas y las primeras a la hora de aprender HTML.
Subirla a la red
El último paso, una vez está creada la página hay que subirla a un servidor web, ya que si no lo podrá ver quien lo ha creado gracias a un navegador, pero nadie más. Para ello, lo más sencillo es usar un cliente FTP, ya que se agilizan muchos pasos del proceso de subir archivos al servidor.
Un cliente FTP emplea el protocolo FTP para conectarse a un servidor FTP para transferir archivos. Como otros servicios de Internet, para utilizar FTP necesitamos un programa especial que se denomina cliente de FTP.
Algunos clientes de FTP básicos vienen integrados en los sistemas operativos, incluyendo Windows, DOS, Linux y Unix. Sin embargo, hay disponibles clientes con más funcionalidades, habitualmente en forma de shareware/freeware para Windows y como software libre para sistemas de tipo Unix. Muchos navegadores recientes también llevan integrados clientes FTP (aunque un cliente FTP trabajará mejor para FTP privadas que un navegador).
Algunos sistemas operativos, incluyendo los Windows más recientes y Mac OS X pueden montar servidores FTP como unidades virtuales directamente dentro del sistema operativo, como puede ser fireftp para firefox, pues es un plugin que se puede añadir al navegador, solo si se necesita. lo que puede resultar más fácil o más conveniente para algunos usuarios, que emplear un cliente especializado.
Todos los programas de FTP son parecidos, básicamente consisten en una ventana que está partida en dos partes. En una parte podemos ver nuestro disco duro, con sus distintas unidades de disco y carpetas. En la otra parte se puede ver el sistema de archivos del servidor, con sus correspondientes carpetas. Para mover los archivos de un lugar a otro suele bastar con arrastrarlos de una parte de la ventana a la otra. Hay que configurar el programa de FTP para que acceda al espacio que tenemos asignado.
Un cliente FTP emplea el protocolo FTP para conectarse a un servidor FTP para transferir archivos. Como otros servicios de Internet, para utilizar FTP necesitamos un programa especial que se denomina cliente de FTP.
Algunos clientes de FTP básicos vienen integrados en los sistemas operativos, incluyendo Windows, DOS, Linux y Unix. Sin embargo, hay disponibles clientes con más funcionalidades, habitualmente en forma de shareware/freeware para Windows y como software libre para sistemas de tipo Unix. Muchos navegadores recientes también llevan integrados clientes FTP (aunque un cliente FTP trabajará mejor para FTP privadas que un navegador).
Algunos sistemas operativos, incluyendo los Windows más recientes y Mac OS X pueden montar servidores FTP como unidades virtuales directamente dentro del sistema operativo, como puede ser fireftp para firefox, pues es un plugin que se puede añadir al navegador, solo si se necesita. lo que puede resultar más fácil o más conveniente para algunos usuarios, que emplear un cliente especializado.
Todos los programas de FTP son parecidos, básicamente consisten en una ventana que está partida en dos partes. En una parte podemos ver nuestro disco duro, con sus distintas unidades de disco y carpetas. En la otra parte se puede ver el sistema de archivos del servidor, con sus correspondientes carpetas. Para mover los archivos de un lugar a otro suele bastar con arrastrarlos de una parte de la ventana a la otra. Hay que configurar el programa de FTP para que acceda al espacio que tenemos asignado.
Suscribirse a:
Comentarios (Atom)