trabajo individual

34
TRABAJO INDIVIDUAL DIEGO FERNANDO CASTRO HERNANDEZ INGENIERIA DE SISTEMAS

Upload: diego-castro

Post on 11-Dec-2015

5 views

Category:

Documents


0 download

DESCRIPTION

trabajo individual # 1 Diego fernando castro electiva de fromecion integral III

TRANSCRIPT

Page 1: Trabajo Individual

TRABAJO INDIVIDUAL

DIEGO FERNANDO CASTRO HERNANDEZINGENIERIA DE SISTEMAS

CORPORACIOPN UNIFICADA NACIONAL DE EDUCACION SUPERIOR CUNELECTIVA DE FORMACION INTEGRAL III

IBAGUE – TOLIMAAÑO 2015

Page 2: Trabajo Individual

TALLER 1

1. QUE ES HTML?

HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.Podríamos decir que HTML sirve para crear páginas web, darles estructura y contenido.

Es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto.

El HTML se creó en un principio con objetivos divulgativos de información con texto y algunas imágenes. No se pensó que llegara a ser utilizado para crear área de ocio y consulta con carácter multimedia (lo que es actualmente la web), de modo que, el HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro.

2. ASPECTOS DE HTML

Una etiqueta HTML es un término rodeado por un signo de menor y otro de mayor; por ejemplo:

<strong>

El conjunto de las dos etiquetas y el texto contenido en su interior conformarían un elemento HTML.

Algunos elementos requieren esa apertura y cierre, mientras que en otros casos sólo necesitaremos una etiqueta, ya que reflejamos un elemento puntual o con un contenido vacío. Por ejemplo:

<hr/> Hace que en el documento aparezca una línea separando el texto anterior del siguiente. Como se puede observar, cuando un elemento no va a tener una etiqueta de cierre (no existe un), </hr> el indicador de fin se añade en la propia etiqueta inicial.

Otra característica importante de las etiquetas es que son anidables, por lo que podemos definir un párrafo (mediante las etiquetas <p> y </p> y en su interior incluir una lista de elementos, imágenes, texto destacado, etc. empleando diferentes etiquetas. Veremos muchos ejemplos al respecto.

Page 3: Trabajo Individual

Parámetros de las etiquetas

Muchas etiquetas HTML necesitan contar con parámetros para funcionar correctamente. Éstos son modificadores que se introducen entre los signos de apertura y cierre para definir algún matiz concreto del elemento HTML.

Por ejemplo, la etiqueta <img/> se emplea para insertar una imagen en la página web, pero por si sola no funciona correctamente. Necesita que le incorporemos un parámetro en el que indiquemos qué imagen será la que se muestre. Quedaría así:

<img src=”fotodelgrupo.jpg” />

En el ejemplo siguiente, además de indicar qué imagen se mostrará, establecemos el tamaño que ocupará en la pantalla:

<img src=”fotodelgrupo.jpg” widh=”300px” height=”150px”/>

Los parámetros se identifican por un término, seguido de un signo de igual y a continuación, entre comillas, el valor que le queramos asignar.

Cuando un visualizador recibe un fichero, antes de mostrarlo necesita saber el tipo de contenido que éste tiene, a fin de procesarlo adecuadamente. No es lo mismo recibir un documento de texto que una fotografía en formato GIF, o un vídeo en formato MPG, o si lo que estamos intentando es transferir un fichero. En cada caso, el visualizador pondrá en juego distintas habilidades, de las muchas que posee. Si el fichero procede de un servidor http remoto, (es decir un servidor web; http es el nombre del protocolo que utilizará el servicio invocado), éste se encargará de decirle al visualizador cuanto necesite saber, pero si lo que hay que procesar es un fichero local, la única forma de saberlo es por la extensión del fichero.

La extensión de un fichero son las tres o cuatro letras (depende del sistema operativo con el que se trabaje) que hay después del nombre del fichero y que están separadas del mismo por un punto.Por ejemplo, esta página se llama estruc.htm. Las tres letras que hay después del punto (htm) son la extensión del fichero. Las otras, las que están delante del punto, son el nombre del fichero.

Las extensiones de 4 o más letras son típicas de sistemas operativos como UNIX o LINUX y las de 3 o menos de Windows, que ha mantenido esta costumbre por herencia de los tiempos del DOS, ya que puede trabajar perfectamente con extensiones de más de 3 letras. Por ejemplo, la extensión .html funciona en Windows igual que la .htm Estas son algunas de las extensiones stándard más comunes y sus contenidos.

La primera de ellas suele utilizarse en sistemas UNIX-LINUX y la segunda en Windows:

.html o .htm

Documento HTML. Contine texto e instrucciones HTML que serán interpretadas..text o .txt

Page 4: Trabajo Individual

Contiene texto plano. El visualizador presentará todo el fichero como si fuera un único bloque de texto y no interpretará ninguna instrucción HTML que pudiera llevar. Esto lo hará con cualquier fichero que lleve una extensión desconocida o simplemente no lleve ninguna.

.gif: Contiene un fichero de imagen en formato GIF. .npg: Contiene un fichero de imagen en formato NPG. .xbm: Contiene un fichero de imagen en formato X-Bitmap (blanco y negro). .xpm: Contiene un fichero de imagen en formato X-Pixmap (color). .jpeg o .jpg: Contiene un fichero de imagen en formato codificado jpeg. .mpeg o .mpg: Contiene un fichero de imagen de video o cine (en movimiento). .au: Contiene un fichero de audio (sonido) codificado en aiff-encoded. .mid: Contiene un fichero de audio (sonido) generado con secuenciadores midi

típicos de Windows. .avi: Contiene un fichero con video y sonido típico de Windows. .mp3: Contiene un fichero con sonido típico de Windows y otros sistemas. .exe: Contiene un fichero binario ejecutable en DOS o Windows. .hqx: Contiene un fichero binario ejecutable en Macintosh. .Z o .zip: Contiene un (o varios) fichero/s comprimido/s de cualquier clase. Para

poder utilizarlo hay que indicarle al visualizador una herramienta de compresión-descompresión.

.pdf: Contiene un fichero de imagen de cualquier documento generado con Acrobat Writer.

.doc: Contiene un fichero de documento generado por Microsoft Word

En el entorno web se utilizan los MIME types (Multipurpose Internet Mail Extension) para definir el tipo de un fichero transferido. El visualizador determina desde el MIME type cómo hay que tratar cada fichero.

3. HISTORIA DEL HTML

HTML 1.0 - 2.01989 - 1991Estos son los primeros pasos del HTML, las páginas no eran muy bonitas que digamos pero por lo menos tenían hipertexto.

HTML 31995Estos son los días de la larga guerra de los navegadores (Browser wars), Netscape y Microsoft competían por tener un navegador con más funciones (y así ganar mercado), hasta inventaban sus propias etiquetas. En el medio de esta guerra estaba el pobre desarrollador web, que tenía que estar al tanto de ambos navegadores.

Por ejemplo Internet Explorer tenía la etiqueta <marquee> y Netscape la etiqueta<blink>.Esa era la época en que veías el típico "best seen on Internet Explorer". En esos días hubieras tenido que escribir 2 páginas diferentes, una para Netscape y otra para Internet Explorer.

HTML 4

Page 5: Trabajo Individual

1998Por fin terminó la guerra de los navegadores y llegó al rescate el Wold Wide Web Consortium (W3C para los amigos) creando una sola versión de HTML.

HTML 4.011999El buen HTML 4.01, es la versión más actual de HTML y seguramente la más usada, por fin se podía escribir tranquilamente un sólo código estando seguro que la mayoría de navegadores lo interpretaría bien.Por supuesto que esta versión tampoco es perfecta, pero está muy cerca de serlo, nada de qué preocuparse. Con HTML 4.01 puedes estar seguro que la gran mayoría de navegadores mostrarán tu contenido de la forma correcta.

XHTML 1.02000Las cosas cambiaron. HTML y otro lenguaje de marcado conocido como XML se juntaron y nació el XHTML 1.0.Es un lenguaje genial, que combina la popularidad y la capacidad de verse correctamente en todos los navegadores del HTML con la capacidad de extensión del XML.

Actualización: HTML 2HTML 3.2HTML 4HTML 4.01XHTML 1XHTML 2HTML 5

4. ESTRUSCTURA 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áginaEntre 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">

Page 6: Trabajo Individual

<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 soloDentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas

<script language="JavaScript">

Aquí iría el código// --></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, parámetro usado para definir el color del texto por omisión. 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 omisión de: texto con enlace, enlace ya visitado y enlace activo.

Los colores por omisión son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.

BACKGROUND, parámetro usado para específica 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">

Page 7: Trabajo Individual

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">El texto del documento se puede modificar de muchas formas, vamos a ver las más usuales:

Títulos

Los títulos o encabezamientos se emplean al comienzo de una sección. Las etiquetas que se usan son:

Etiqueta Se ve<h1> Título </h1> Título<h2> Título </h2> Título<h3> Título </h3> Título<h4> Título </h4> Título<h5> Título </h5> Título<h6> Título </h6> Título

Estilos de fuentes

Como ves en la tabla es muy sencillo conseguir los efectos deseados, solamente tienes que colocar el texto entre las etiquetas adecuadas.

Etiqueta Se ve<B>Texto en Negrita</b><I>Itálica</i><B><I>Negrita e Itálica</i></b><U>Subrayado</u><EM>Enfatizado</em><STRONG>Fuerte</strong><CODE>Code Texto</code><CITE> Citation Text</cite><KBD>Keyboard Text</kbd><SAMP>Sample Text</samp><TT>Teletype Text</tt><VAR>Variable Element Text</var><BIG>Texto grande</big><SMALL>Texto pequeño</small><SUB>Subindice</SUB><SUP>Superíndice</SUP>

Texto en NegritaItálicaNegrita e ItálicaSubrayado Solo ExplorerEnfatizadoFuerteCode TextoCitation TextKeyboard TextSample TextTeletype TextVariable Element TextTexto grandeTexto pequeñoSubíndice Solo ExplorerSuperíndice Solo Explorer

Page 8: Trabajo Individual

<BLINK> Texto intermitente</blink><STRIKE>Texto tachado</STRIKE>

Texto intermitente Solo NetscapeTexto tachado

Tamaño de fuentes

El tamaño de las fuentes se puede especificar de dos maneras, una de ellas por medio de un número del 1 al 7 (de más pequeño a más grande) del siguiente modo<font size=1> Esta es la letra más pequeña que se puede conseguir </font>

Que se verá como

Esta es la letra más pequeña que se puede conseguirOtra forma es por medio de una referencia relativa:

<font size="+1"> Esto es igual que poner size=4 </font>

Que se ve como

Esto es igual que poner size=4El tamaño por defecto es el 3

Tipos de fuentes

El tipo de fuente es un atributo de FONT y tiene la siguiente sintaxis<font face="Courier">Eso se verá en la fuente Courier</font>

Que se ve como:

Eso se verá en la fuente Courier

Color de las fuentes

Es otro atributo de FONT. Mira en la página de colores para saber cómo se especifican los colores. La sintaxis es la siguiente:

<font size=2 face="MS Sans Serif" color="navy">Como ves se pueden poner varios Atributos separados por un espacio</font>

Que se verá así:Como ves se pueden poner varios atributos separados por un espacio

Párrafos y bloquesPara definir y separar bloques de texto se emplean una serie de etiquetas que definen los párrafos, texto pre formateado o bloques con significado especial como direcciones o citas. 

Etiquetas de bloques:

<P> Se utiliza para que los párrafos queden separados por una línea en blanco. Si solo quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final son <P> y</P>. La etiqueta <P> admite los atributos:

Page 9: Trabajo Individual

ALIGN="left”, ALIGN="right" , ALIGN="center" y ALIGN="justify" para alinearlo a la izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto está alineado a la izquierda.

<PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el navegador respetando el formato con el que fue escrito en el fichero fuente HTML. Esta etiqueta es muy útil para escribir más de un espacio o para hacer pequeñas tablas<ADDRESS> empleada para indicar que un texto representa una dirección o una firma.

Generalmente se presenta en cursiva y tabulado.<BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha. Toda los párrafos de esta página están entre las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE>, De ese modo se consigue que el texto se presente con márgenes a ambos lados.<BR> Este elemento sólo tiene marca inicial e indica un salto de línea, es decir un punto y aparte sin separar el párrafo. Esta etiqueta no tiene su correspondiente de cierre<HR> Se emplea para representar una línea horizontal. Tampoco tiene pareja de cierre. Se pueden emplear los atributos

ALIGN="left”, ALIGN="right" , para alinearla a la izquierda o a la derecha. Por defecto aparece centrada

WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en píxelsCOLOR="#0000FF”, para especificar el color.

5. LA SINTAXIS DE HTML

El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos etiqueta. A través de las etiquetas vamos definiendo los elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará constituido por texto y un conjunto de etiquetas para definir la forma con la que se tendrá que presentar el texto y otros elementos en la página.

La etiqueta presenta frecuentemente dos partes:

Una apertura 

De forma general <etiqueta> 

Un cierre de tipo </etiqueta>

Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. Así por ejemplo:Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código:<b>Esto está en negrita</b>

El resultado Será:

Esto está en negritaLas etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML escribiéramos:

Page 10: Trabajo Individual

<p>Hola, estamos en el párrafo 1</p> 

<p>Ahora hemos cambiado de párrafo</p>

El resultado sería: 

Hola, estamos en el párrafo 1Ahora hemos cambiado de párrafoPartes de un documento HTML

Además de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como por ejemplo el título de nuestra página.

El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado es un documento con la siguiente estructura:

<Html><Head> 

Etiquetas y contenidos del encabezado 

Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Título, palabras clave,... 

</Head><Body> 

Etiquetas y contenidos del cuerpo 

Parte del documento que será mostrada por el navegador: Texto e imágenes </body></Html>

6. ELEMENTOS DE BLOQUE Y EN LINEA

En HTML los elementos pueden ser clasificados de varias maneras, por ejemplo:Según el doctype, según su estructura, según su función, entre otras.Por ahora sólo vamos a mencionar que según su estructura pueden sub-dividirse en otros 3 grupos: básicos, de cabecera y de cuerpo.

Los básicos son aquellos que conforman primariamente el HTML. Sin éstos no existe el HTML como tal, por ejemplo para un documento normal son: html, head, body.

Page 11: Trabajo Individual

Los de cabecera son aquellos que están dentro de la etiqueta <head> y contienen información relevante para el funcionamiento del documento, por ejemplo: title, base, meta, link, style, script, object, entre otros.Los de cuerpo son aquellos que están dentro de la etiqueta <body> y estructuran el contenido de un documento. Estos pueden dividirse principalmente en elementos en bloque (block elements) y en elementos en línea (inline elements). (Existen elementos que tienen dobles clasificaciones, así también existen elementos que son subordinados).La diferencia entre ambos está dada por el Modelo de contenido, por el Formato y la Direccionalidad, en esta reseña nos vamos a centrar en las dos primeras:

Modelo de contenido: los elementos en bloque pueden contener elementos en línea y a otros elementos en bloque. A su vez los elementos en línea pueden contener otros datos y elementos en línea, pero no elementos en bloque. En esta distinción está relacionada la idea de que los elementos en bloque crean estructuras “más grandes” que los elementos en línea.Formato: Los elementos en bloque tienen por defecto un formato diferente que el de los elementos en línea. Generalmente, los elementos en bloque comienzan en una nueva línea, y los elementos en línea no. Es decir, cada vez que existe un elemento en bloque, existe un salto de línea asociado a él.

 Los elementos en línea son:

a define un anchor (anclaje) (o hipervínculo)

abbrdefine una forma abreviada de una palabra o de una frase

acronymuna abreviatura que incluye las letras iniciales de una frase

b se desaconseja el usoIndica que el texto debe ser representado con bold (o negrita).

basefont desaprobado permite cambiar algunas propiedades del texto

bdo

bi-directional override – anulación del algoritmo bidireccional (en referencia a la dirección de la escritura).

big se desaconseja el usoMuestra el texto marcado con un tamaño de fuente más grande.

br line Break – Ruptura (o salto) de línea

citeMarca una referencia a una fuente, o el autor de un texto citado.

Page 12: Trabajo Individual

code Sirve para marcar el código de un programa.

dfn Sirve para marcar el término que se quiere definir.

em emphasis – énfasis

font desaprobadoIndica el tamaño, color, o fuente del texto que contiene.

i se desaconseja el usoMuestra el texto marcado con un estilo en cursiva o itálica (no tiene un uso semántico, sólo visual).

img imagen

inputElemento que se utiliza para capturar la información del usuario (dependiendo del contexto varía).

kbd Marca el texto que debe introducir el usuario.

labelEl elemento label (etiqueta) asocia un rótulo o etiqueta a un campo de un formulario.

q (Short quotations) cita corta.

s desaprobado(strike-through) tachado (no tiene un uso semántico, sólo visual).

samp

Sirve identificar una muestra de los caracteres que forman la salida o el resultado de algún proceso (por ejemplo de un programa de computación).

selectCrea un contenedor mediante el cual los usuarios pueden seleccionar de una lista de opciones.

small se desaconseja el usoAplica al texto marcado un tamaño de fuente más pequeño.

span

(Abarcar). Es un contenedor genérico en línea. Sirve para para aplicar estilo al texto o agrupar elementos en línea

strike desaprobado Muestra el texto tachado con una linea horizontal.

Page 13: Trabajo Individual

strongSirve para marcar con especial énfasis las partes más importantes de un texto.

subCrea un subíndice posicionando el texto marcado por debajo de la linea.

supCrea un superíndice posicionando el texto marcado por encima de la linea.

textareaSimilar a input crea un control de entrada de texto multilínea.

tt se desaconseja el usoSirve para representar como texto de teletipo (teletype) o ancho fijo.

u desaprobado Muestra el texto subrayado.

var Marca variables de programas y similares.

Los elementos en bloque son:

addressEs el elemento encargado de contener la información de contacto con los autores del documento.

blockquote(Cita en bloque). Crea citas en bloque, marca las citas a otros autores o documentos.

centerdesaprobado

El elemento center (centro) crea una caja en bloque con el contenido centrado. En realidad es equivalente a un div con align=”center”.

dirdesaprobado

El elemento DIR fue diseñado para crear listas multicolumna de directorios.

div(De “division” – división). Es un elemento en bloque genérico y sirve para crear secciones o agrupar contenidos.

dl(De “definition list” – lista de definición). Crea una lista de definiciones.

fieldsetEl elemento fieldset (grupo de campos) permite organizar en grupos los campos de un formulario.

form Actúa como contenedor de controles.

Page 14: Trabajo Individual

h1Crea un encabezado o título de primer nivel para una sección del documento.

h2Crea un encabezado o título de segundo nivel para una sección del documento.

h3Crea un encabezado o título de tercer nivel para una sección del documento.

h4Crea un encabezado o título de cuarto nivel para una sección del documento.

h5Crea un encabezado o título de quinto nivel para una sección del documento.

h6Crea un encabezado o título de sexto nivel para una sección del documento.

hr Crea una linea de separación horizontal.

isindexdesaprobado

Este elemento crea un control de entrada de texto de una línea.

menudesaprobado En su origen fue pensado para crear menús.

noframes

(De ‘sin marcos’). Aporta contenidos alternativos a los marcos. Las aplicaciones de usuario que no soporten marcos, o que estén configuradas para no mostrarlos, deben mostrar en su lugar el contenido de este elemento.

noscriptContenedor de contenido alternativo para la representación no basada en scripts.

ol (Lista ordenada). Crea una lista ordenada.

p párrafo

pre(preformateado). Permite que el texto conserve el formato y sea mostrado tal cual.

table tabla

Page 15: Trabajo Individual

ul(De ‘unordered list’, lista no ordenada). Crea una lista no ordenada.

7. REFERENCIAS DE CARACTERES EN HTML

Una referencia de caracteres es una pequeña pieza de código usada para representar ciertos caracteres en documentos HTML. Principalmente usada para insertar símbolos que no pertenecen al juego de caracteres (o en muchos casos, símbolos difíciles de ingresar), las referencias de caracteres pueden insertarse utilizando una expresión regular. De hecho, cada referencia de caracteres puede insertarse de tres formas diferentes:

Por su nombre de entidad: Cada referencia de caracteres tiene una entidad asignada. El formato apra insertar un símbolo por su nombre de entidad está compuesto por un símbolo "&" seguido de su nombre de entidad y un punto y coma (";"). Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "& pound;".

Por su valor decimal: Tal como con las entidades, un número único es asociado con cada referencia de caracteres. El formato es compuesto por un símbolo "&" seguido de un signo numeral ("#"), el número asociado y un punto y coma (";"). Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "&#163;".

Por su valor hexadecimal: Este método funciona exactamente como el del valor decimal con la diferencia que el número se escribe en formato hexadecimal y una "x" (en minúscula) se agrega a continuación del signo numeral ("#"). Las letras en el número hexadecimal deben ir en mayúsculas. Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "&#xA3;".

Muchos navegadores no proveen soporte para todas las entidades de caracteres y usualmente representan un cuadrado blanco ("□") o un signo de pregunta ("?" ó "�") en su lugar. Por otra parte, la notación hexadecimal para referencias de caracteres tampoco es soportada por muchos navegadores, lo que la hace una forma poco fiable de reproducir símbolos. Dicho esto, queda claro que la mejor forma de representar referencias de caracteres es a través de la noración decimal.

Tablas de referencia de caracteres

A continuación hay tres tablas de referencias de caracteres que muestran las tres notaciones y su representación, para cada símbolo disponible para documentos HTML. Los documentos XHTML incluyen el símbolo de apóstrofe, referido como "&apos;" (por su nombre de entidad), "&#39;" (por su valor decimal) y "&#x27" (por su valor hexadecimal).

Nota que, como esta referencia de caracteres ha sido recientemente introducidad, muchos navegadores todavía no pueden procesarla por su nombre de entidad, por lo que es recomendable usar la notación decimal.

Page 16: Trabajo Individual

Marcado y caracteres de internacionalización

Nombre Decimal Hexa Carácter

&quot; &#34; &#x22; "

&amp; &#38; &#x26; &

&lt; &#60; &#x3C; <

&gt; &#62; &#x3E; >

&OElig; &#338; &#x152; Œ

&oelig; &#339; &#x153; œ

&Scaron; &#352; &#x160; Š

&scaron; &#353; &#x161; š

&Yuml; &#376; &#x178; Ÿ

&circ; &#710; &#x2C6; ˆ

&tilde; &#732; &#x2DC; ˜

&ensp; &#8194; &#x2002;

&emsp; &#8195; &#x2003;

&thinsp; &#8201; &#x2009;

&zwnj; &#8204; &#x200C; ‌

&zwj; &#8205; &#x200D; ‌

&lrm; &#8206; &#x200E;

&rlm; &#8207; &#x200F;

&ndash; &#8211; &#x2013; –

&mdash; &#8212; &#x2014; —

&lsquo; &#8216; &#x2018; ‘

Page 17: Trabajo Individual

Nombre Decimal Hexa Carácter

&rsquo; &#8217; &#x2019; ’

&sbquo; &#8218; &#x201A; ‚

&ldquo; &#8220; &#x201C; “

&rdquo; &#8221; &#x201D; ”

&bdquo; &#8222; &#x201E; „

&dagger; &#8224; &#x2020; †

&Dagger; &#8225; &#x2021; ‡

&permil; &#8240; &#x2030; ‰

&lsaquo; &#8249; &#x2039; ‹

&rsaquo; &#8250; &#x203A; ›

&euro; &#8364; &#x20AC; €

ISO 8859-1 (Latin 1)

ISO 8859-1 characters (Latin 1)">

Nombre Decimal Hexa Carácter

&nbsp; &#160; &#xA0;

&iexcl; &#161; &#xA1; ¡

&cent; &#162; &#xA2; ¢

&pound; &#163; &#xA3; £

&curren; &#164; &#xA4; ¤

&yen; &#165; &#xA5; ¥

&brvbar; &#166; &#xA6; ¦

&sect; &#167; &#xA7; §

&uml; &#168; &#xA8; ¨

Page 18: Trabajo Individual

Nombre Decimal Hexa Carácter

&copy; &#169; &#xA9; ©

&ordf; &#170; &#xAA; ª

&laquo; &#171; &#xAB; «

&not; &#172; &#xAC; ¬

&shy; &#173; &#xAD;

&reg; &#174; &#xAE; ®

&macr; &#175; &#xAF; ¯

&deg; &#176; &#xB0; °

&plusmn; &#177; &#xB1; ±

&sup2; &#178; &#xB2; ²

&sup3; &#179; &#xB3; ³

&acute; &#180; &#xB4; ´

&micro; &#181; &#xB5; µ

&para; &#182; &#xB6; ¶

&middot; &#183; &#xB7; ·

&cedil; &#184; &#xB8; ¸

&sup1; &#185; &#xB9; ¹

&ordm; &#186; &#xBA; º

&raquo; &#187; &#xBB; »

&frac14; &#188; &#xBC; ¼

&frac12; &#189; &#xBD; ½

&frac34; &#190; &#xBE; ¾

&iquest; &#191; &#xBF; ¿

Page 19: Trabajo Individual

Nombre Decimal Hexa Carácter

&Agrave; &#192; &#xC0; À

&Aacute; &#193; &#xC1; Á

&Acirc; &#194; &#xC2; Â

&Atilde; &#195; &#xC3; Ã

&Auml; &#196; &#xC4; Ä

&Aring; &#197; &#xC5; Å

&AElig; &#198; &#xC6; Æ

&Ccedil; &#199; &#xC7; Ç

&Egrave; &#200; &#xC8; È

&Eacute; &#201; &#xC9; É

&Ecirc; &#202; &#xCA; Ê

&Euml; &#203; &#xCB; Ë

&Igrave; &#204; &#xCC; Ì

&Iacute; &#205; &#xCD; Í

&Icirc; &#206; &#xCE; Î

&Iuml; &#207; &#xCF; Ï

&ETH; &#208; &#xD0; Ð

&Ntilde; &#209; &#xD1; Ñ

&Ograve; &#210; &#xD2; Ò

&Oacute; &#211; &#xD3; Ó

&Ocirc; &#212; &#xD4; Ô

&Otilde; &#213; &#xD5; Õ

&Ouml; &#214; &#xD6; Ö

Page 20: Trabajo Individual

Nombre Decimal Hexa Carácter

&times; &#215; &#xD7; ×

&Oslash; &#216; &#xD8; Ø

&Ugrave; &#217; &#xD9; Ù

&Uacute; &#218; &#xDA; Ú

&Ucirc; &#219; &#xDB; Û

&Uuml; &#220; &#xDC; Ü

&Yacute; &#221; &#xDD; Ý

&THORN; &#222; &#xDE; Þ

&szlig; &#223; &#xDF; ß

&agrave; &#224; &#xE0; à

&aacute; &#225; &#xE1; á

&acirc; &#226; &#xE2; â

&atilde; &#227; &#xE3; ã

&auml; &#228; &#xE4; ä

&aring; &#229; &#xE5; å

&aelig; &#230; &#xE6; æ

&ccedil; &#231; &#xE7; ç

&egrave; &#232; &#xE8; è

&eacute; &#233; &#xE9; é

&ecirc; &#234; &#xEA; ê

&euml; &#235; &#xEB; ë

&igrave; &#236; &#xEC; ì

&iacute; &#237; &#xED; í

Page 21: Trabajo Individual

Nombre Decimal Hexa Carácter

&icirc; &#238; &#xEE; î

&iuml; &#239; &#xEF; ï

&eth; &#240; &#xF0; ð

&ntilde; &#241; &#xF1; ñ

&ograve; &#242; &#xF2; ò

&oacute; &#243; &#xF3; ó

&ocirc; &#244; &#xF4; ô

&otilde; &#245; &#xF5; õ

&ouml; &#246; &#xF6; ö

&divide; &#247; &#xF7; ÷

&oslash; &#248; &#xF8; ø

&ugrave; &#249; &#xF9; ù

&uacute; &#250; &#xFA; ú

&ucirc; &#251; &#xFB; û

&uuml; &#252; &#xFC; ü

&yacute; &#253; &#xFD; ý

&thorn; &#254; &#xFE; þ

&yuml; &#255; &#xFF; ÿ

Símbolos, símbolos matemáticos, y letras griegas

Nombre Decimal Hexa Carácter

&fnof; &#402; &#x192; ƒ

&Alpha; &#913; &#x391; Α

&Beta; &#914; &#x392; Β

Page 22: Trabajo Individual

Nombre Decimal Hexa Carácter

&Gamma; &#915; &#x393; Γ

&Delta; &#916; &#x394; Δ

&Epsilon; &#917; &#x395; Ε

&Zeta; &#918; &#x396; Ζ

&Eta; &#919; &#x397; Η

&Theta; &#920; &#x398; Θ

&Iota; &#921; &#x399; Ι

&Kappa; &#922; &#x39A; Κ

&Lambda; &#923; &#x39B; Λ

&Mu; &#924; &#x39C; Μ

&Nu; &#925; &#x39D; Ν

&Xi; &#926; &#x39E; Ξ

&Omicron; &#927; &#x39F; Ο

&Pi; &#928; &#x3A0; Π

&Rho; &#929; &#x3A1; Ρ

&Sigma; &#931; &#x3A3; Σ

&Tau; &#932; &#x3A4; Τ

&Upsilon; &#933; &#x3A5; Υ

&Phi; &#934; &#x3A6; Φ

&Chi; &#935; &#x3A7; Χ

&Psi; &#936; &#x3A8; Ψ

&Omega; &#937; &#x3A9; Ω

&alpha; &#945; &#x3B1; α

Page 23: Trabajo Individual

Nombre Decimal Hexa Carácter

&beta; &#946; &#x3B2; β

&gamma; &#947; &#x3B3; γ

&delta; &#948; &#x3B4; δ

&epsilon; &#949; &#x3B5; ε

&zeta; &#950; &#x3B6; ζ

&eta; &#951; &#x3B7; η

&theta; &#952; &#x3B8; θ

&iota; &#953; &#x3B9; ι

&kappa; &#954; &#x3BA; κ

&lambda; &#955; &#x3BB; λ

&mu; &#956; &#x3BC; μ

&nu; &#957; &#x3BD; ν

&xi; &#958; &#x3BE; ξ

&omicron; &#959; &#x3BF; ο

&pi; &#960; &#x3C0; π

&rho; &#961; &#x3C1; ρ

&sigmaf; &#962; &#x3C2; ς

&sigma; &#963; &#x3C3; σ

&tau; &#964; &#x3C4; τ

&upsilon; &#965; &#x3C5; υ

&phi; &#966; &#x3C6; φ

&chi; &#967; &#x3C7; χ

&psi; &#968; &#x3C8; ψ

Page 24: Trabajo Individual

Nombre Decimal Hexa Carácter

&omega; &#969; &#x3C9; ω

&thetasym; &#977; &#x3D1; ϑ

&upsih; &#978; &#x3D2; ϒ

&piv; &#982; &#x3D6; ϖ

&bull; &#8226; &#x2022; •

&hellip; &#8230; &#x2026; …

&prime; &#8242; &#x2032; ′

&Prime; &#8243; &#x2033; ″

&oline; &#8254; &#x203E; ‾

&frasl; &#8260; &#x2044; ⁄

&weierp; &#8472; &#x2118; ℘&image; &#8465; &#x2111; ℑ&real; &#8476; &#x211C; ℜ&trade; &#8482; &#x2122; ™

&alefsym; &#8501; &#x2135; ℵ&larr; &#8592; &#x2190; ←

&uarr; &#8593; &#x2191; ↑

&rarr; &#8594; &#x2192; →

&darr; &#8595; &#x2193; ↓

&harr; &#8596; &#x2194; ↔

&crarr; &#8629; &#x21B5; ↵&lArr; &#8656; &#x21D0; ⇐&uArr; &#8657; &#x21D1; ⇑

Page 25: Trabajo Individual

Nombre Decimal Hexa Carácter

&rArr; &#8658; &#x21D2; ⇒&dArr; &#8659; &#x21D3; ⇓&hArr; &#8660; &#x21D4; ⇔&forall; &#8704; &#x2200; ∀&part; &#8706; &#x2202; ∂

&exist; &#8707; &#x2203; ∃&empty; &#8709; &#x2205; ∅&nabla; &#8711; &#x2207; ∇&isin; &#8712; &#x2208; ∈&notin; &#8713; &#x2209; ∉&ni; &#8715; &#x220B; ∋&prod; &#8719; &#x220F; ∏

&sum; &#8721; &#x2211; ∑

&minus; &#8722; &#x2212; −

&lowast; &#8727; &#x2217; ∗&radic; &#8730; &#x221A; √

&prop; &#8733; &#x221D; ∝&infin; &#8734; &#x221E; ∞

&ang; &#8736; &#x2220; ∠&and; &#8743; &#x2227; ∧&or; &#8744; &#x2228; ∨&cap; &#8745; &#x2229; ∩

&cup; &#8746; &#x222A; ∪

Page 26: Trabajo Individual

Nombre Decimal Hexa Carácter

&int; &#8747; &#x222B; ∫

&there4; &#8756; &#x2234; ∴&sim; &#8764; &#x223C; ∼&cong; &#8773; &#x2245; ≅&asymp; &#8776; &#x2248; ≈

&ne; &#8800; &#x2260; ≠

&equiv; &#8801; &#x2261; ≡

&le; &#8804; &#x2264; ≤

&ge; &#8805; &#x2265; ≥

&sub; &#8834; &#x2282; ⊂&sup; &#8835; &#x2283; ⊃&nsub; &#8836; &#x2284; ⊄&sube; &#8838; &#x2286; ⊆&supe; &#8839; &#x2287; ⊇&oplus; &#8853; &#x2295; ⊕&otimes; &#8855; &#x2297; ⊗&perp; &#8869; &#x22A5; ⊥&sdot; &#8901; &#x22C5; ⋅&lceil; &#8968; &#x2308; ⌈&rceil; &#8969; &#x2309; ⌉&lfloor; &#8970; &#x230A; ⌊&rfloor; &#8971; &#x230B; ⌋&lang; &#9001; &#x2329; ⟨

Page 27: Trabajo Individual

Nombre Decimal Hexa Carácter

&rang; &#9002; &#x232A; ⟩&loz; &#9674; &#x25CA; ◊

&spades; &#9824; &#x2660; ♠

&clubs; &#9827; &#x2663; ♣

&hearts; &#9829; &#x2665; ♥

&diams; &#9830; &#x2666; ♦

i

Page 28: Trabajo Individual

i‌http://librosweb.es/www.uv.eshttp://platea.pntic.mec.es/