1.
Definición
El HTML ( HiperText
Markup Language ) es el lenguaje utilizado para representar documentos en la
WWW (World Wide Web). Además de texto normal incluye también, elementos
multimedia (gráficos, vídeo, audio) y existen enlaces (links) que permiten
saltar a otras partes del documento o a otro sitio cualquiera de Internet.
Otra característica muy importante de este lenguaje es que es portable, es decir, se pueden visualizar las páginas con cualquier sistema operativo y, por supuesto también crearlas.
Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden controlar los elementos tipográficos del texto: tipo, color y tamaño de las fuentes, el estilo ( negrita, cursiva, etc ), así como también la inclusión de tablas, listas, formularios, la inserción de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc.
Las etiquetas se pueden modificar por medio de sus atributos, éstos son del tipo atributo="valor" y se colocan detrás del nombre de la etiqueta
El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y > y normalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado.
Otra característica muy importante de este lenguaje es que es portable, es decir, se pueden visualizar las páginas con cualquier sistema operativo y, por supuesto también crearlas.
Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden controlar los elementos tipográficos del texto: tipo, color y tamaño de las fuentes, el estilo ( negrita, cursiva, etc ), así como también la inclusión de tablas, listas, formularios, la inserción de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc.
Las etiquetas se pueden modificar por medio de sus atributos, éstos son del tipo atributo="valor" y se colocan detrás del nombre de la etiqueta
El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y > y normalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado.
Por
ejemplo si escribimos
<FONT
COLOR="#ff0000" size="2">El texto se verá rojo y en
tamaño un poco menor de lo normal </font>
Se
verá como El texto se verá rojo y en tamaño un poco menor de lo normal
El
uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difícil.
Precisamente el objetivo de esta pequeña guía es servir de introducción y
referencia de las características más usadas del HTML
2.-Versiones
de html
El HTML fue desarrollado originalmente por Tim Bernes-Lee en el CERN
(Centro Europeo de Física de Partículas), y fue popularizado por el navegador
Mosaic desarrollado por la NCSA (National Center for Supercomputing
Applications). Pero debido al rápido crecimiento de la web, surgió la necesidad
de crear un estándar para que tanto los autores como los navegadores pudieran reconocer
cualquier versión de HTML.
Los estándares HTML son el
HTML 2.0,
el HTML 3.2,
el HTML 4.0
y el HTML 4.01., algunos creen que el HTML ya no tiene futuro porque existe
el XHTML que es mejor pero
el navagedor más popular (el de la letra e azul) no lo soporta por lo que otros
piensan
que el futuro está en el HTML 5.
Actualmente
a versión de HTML más utilizada es la 4.01 y el XHTML 1.0 estás 2 versiones
fueron definidas por la W3C hace 7 y 8 años. ahora
se preparan nuevas versiones que son el HTML 5 y el
XHTML 2.
Además de
cada versión, cada una tiene variantes que siempre se tienen que definir en el documento
HTML, las variantes del HTML 4.01 son:
- HTML 4.01 Strict: el normal, donde se pueden usar etiquetas HTML 4.01, pero no se aceptan etiquetas obsoletas.
- HTML 4.01 Transitional: este permite usar todo tipo de etiquetas de todas las versiones de HTML, no es recomendable.
- HTML 4.01 Frameset: Tiene soporte para frames, muy anticuado.
El año pasado The Document Foundation anunció sus
planes para crear tanto la versión on-line como la versión para
Android de la suite ofimática LibreOffice, y con motivo de la celebración este
pasado fin de semana del evento FOSDEM para desarrolladores hemos
podido ver cómo avanza ese proyecto.
Michael Meeks, desarrollador de SUSE y líder de la iniciativa,
mostró el estado actual de ambas versiones, y precisamente uno de los objetivos
del grupo de desarrollo es el de compartir el máximo código posible
entre las versiones de escritorio, móvil y web.
Puede que aún quede mucho camino por delante, pero por ejemplo
se pudo ver en escena un prototipo de la aplicación para tablets
Android (con Honeycomb y con Ice Cream Sandwich), y parece que sus
capacidades prometen.
Ese prototipo ejecutado en un entorno emulado de Android
demostró que hay que resolver el principal problema – adaptar
LibreOffice a una interfaz táctil-, y de hecho se espera que el primer
hito sea el de lograr un visor de documentos “de alta fidelidad” para luego
añadir capacidades de edición limitadas que vayan creciendo.
3.- Navegadores de compatibilidad
La perfecta
compatibilidad de los documentos HTML con Netscape Communicator y Microsoft
Internet Explorer es una de las cuestiones más controvertidas de la creación de
sitios. Y lo es no sólo por razones técnicas o de oportunidad, sino también por
razones generales de política comercial y desarrollo del web. Los juicios sobre
este último aspecto los dejamos a la opinión de nuestros lectores. Nuestra
misión es bien distinta: mostrar si y cómo es aún posible crear sitios
crossbrowser, es decir sitios compatibles con los dos navegadores de mayor
difusión en el mercado Internet.
HTML 4 es el último estándar en orden cronológico que el W3C ha recomendado
para regir las suertes de este sistema de marcado. Ya desde hace años, sibilas
cada vez más convencidas del carácter obsoleto de HTML prevén el final del
sistema de marcado. No será así, al menos a corto plazo, y HTML regirá con toda
probabilidad la suerte del publishing aún por mucho tiempo.
Dynamic HTML
Si piensar introducir efectos de HTML dinámico en tu sitio, ármate de paciencia y prepárate para una infinidad de elementos incompatibles.
Xml
Sirve cuanto dicho anteriormente para DHTML. Si Microsoft ha proyectado un experimento XML con los archivos CDF (Channel Definition Format), Netscape ha respondido con una tecnología propia RDF (Resource Description Format).
Si piensar introducir efectos de HTML dinámico en tu sitio, ármate de paciencia y prepárate para una infinidad de elementos incompatibles.
Xml
Sirve cuanto dicho anteriormente para DHTML. Si Microsoft ha proyectado un experimento XML con los archivos CDF (Channel Definition Format), Netscape ha respondido con una tecnología propia RDF (Resource Description Format).
Javascript
Si en las anteriores versiones de los dos navegadores las incompatibilidades
parecían insuperables, a partir de la cuarta versión parecen atenuarse a favor
de una mayor integración.
Hojas de estilo
Internet Explorer versiones 4 y 5 interpretan a la perfección las CSS. Desde la versión 3 el navegador de Microsoft implementa las hojas de estilo y gran parte de las recomendaciones del W3C relativas a estos instrumentos son ya característica de MS.
Hojas de estilo
Internet Explorer versiones 4 y 5 interpretan a la perfección las CSS. Desde la versión 3 el navegador de Microsoft implementa las hojas de estilo y gran parte de las recomendaciones del W3C relativas a estos instrumentos son ya característica de MS.
Applet Java
Afortunadamente Java queda al margen de lógicas de compatibilidad gracias a su característica de lenguaje multiplataforma. Los apliques (applet) Java, por tanto, son perfectamente compatibles con ambos navegadores.
Macromedia Flash
Como para Java, tampoco para Flash se plantean problemas de compatibilidad, si bien en este caso es necesario instalar en el propio ordenador el programa suministrado por Macromedia para la lectura de los archivos de Flash.
Además de las anteriores, existen otras muchas pequeñas incompatibilidades:
· Los active Channel (tecnología CDF) funcionan
sólo con MsIe desde la cuarta versión;
· La propiedad bgproperties="fixed"
de la marca body funciona sólo con MsIe;
· Sólo MsIe4 prevé la posibilidad de agregar la
página actual a favoritos y de convertir la misma en la página por defecto del
navegador.
· Para los archivos sonoros de fondo: <BGSOUND>
funciona sólo con MSIE pero no con Navigator.
 |
3.-Editores de código html
Como muchos
sistemas tienen distintos juegos de caracteres ASCII, se emplean códigos
para representarlos por igual en cualquiera de ellos. De esta manera se asegura
que cualquiera que vea nuestra página lo hará de igual modo que nosotros.
Símbolo
|
Etiqueta
|
Símbolo
|
Etiqueta
|
Símbolo
|
Etiqueta
|
Símbolo
|
Etiqueta
|
á
|
á
|
Á
|
Á
|
à
|
à
|
À
|
À
|
é
|
é
|
É
|
É
|
è
|
è
|
È
|
È
|
í
|
í
|
Í
|
Í
|
ì
|
ì
|
Ì
|
Ì
|
ó
|
ó
|
Ó
|
Ó
|
ò
|
ò
|
Ò
|
Ò
|
ú
|
ú
|
Ú
|
Ú
|
ù
|
ù
|
Ù
|
Ù
|
ä
|
ä
|
Ä
|
Ä
|
â
|
â
|
Â
|
Â
|
ë
|
ë
|
Ë
|
Ë
|
ê
|
ê
|
Ê
|
Ê
|
ï
|
ï
|
Ï
|
Ï
|
î
|
î
|
Î
|
Î
|
ö
|
ö
|
Ö
|
Ö
|
ô
|
ô
|
Ô
|
Ô
|
ü
|
ü
|
Ü
|
Ü
|
û
|
û
|
Û
|
Û
|
ñ
|
ñ
|
Ñ
|
Ñ
|
ý
|
ý
|
ÿ
|
ÿ
|
ç
|
ç
|
Ç
|
Ç
|
æ
|
æ
|
Æ
|
Æ
|
ø
|
ø
|
Ø
|
Ø
|
©
|
©
|
®
|
®
|
&
|
&
|
"
|
"
|
<
|
<
|
>
|
>
|
(espacio)
|
|
4.-Estructura
de una pagina
o Identificador del tipo de documento
<html>
<HTML>
<HEAD>
<TITLE>Título de la
página</TITLE>
...
</HEAD>
<BODY>
Aquí iría el contenido de la página
</BODY>
</HTML>
o Cabecera de la página <head>
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>).
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">
<!--
<!--
Aquí iría
el código
// -->
</SCRIPT>
</SCRIPT>
o Título de la página <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
<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
o La etiqueta <meta>
<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">
<meta name="keywords" content="educación,enseñanza,instituto, profesores, alumnos">
o Cuerpo del documento <body>
Sintaxis: <BODY
BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>
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.
BACKGROUND, parámetro
usado para especifica la ruta y nombre de archivo (URL) de la imagen que será
usanda como fondo del documento. Sintaxis:
<BODY BACKGROUND="ruta/archivo.gif">
Si la página estuviese en ejemplos se pondría:
<BODY BACKGROUND=".../gifs/fondo.gif">
o Colores en hexadecimal
16 Colores estandar (4 bits)
BLACK
|
NAVY
|
BLUE
|
TEAL
|
AQUA
|
SILVER
|
GRAY
|
YELLOW
|
GREEN
|
OLIVE
|
LIME
|
RED
|
MAROON
|
WHITE
|
FUCHSIA
|
PURPLE
|
256 Colores RGB (8 bits)
RED
FF0000 |
FF3300
|
CC3300
|
FF9999
|
FFCCCC
|
990033
|
MAROON
990000 |
FF3333
|
CC3333
|
FFCC99
|
CC0066
|
993300
|
||
FF0033
|
CC0033
|
FF9966
|
FF6699
|
660000
|
||
000000
|
CC0000
|
663333
|
990066
|
330000
|
LIME
66FF00 |
33FF33
|
66FF66
|
OLIVE
66FF00 |
99FF99
|
CCFFCC
|
GREEN
00FF00 |
00CC00
|
009900
|
006600
|
003300
|
|||
00CC00
|
009900
|
006600
|
003300
|
|||
009900
|
006600
|
66FF00
|
009900
|
AQUA
00FFFF |
00FFFF
|
3333FF
|
TEAL
008080 |
6666FF
|
9999FF
|
BLUE
0000FF |
33FFFF
|
66FFFF
|
99FFFF
|
CCFFFF
|
|||
CCCCFF
|
0000CC
|
000099
|
000099
|
|||
CCCCFF
|
000066
|
000033
|
000099
|
00CCCC
|
009999
|
006666
|
003333
|
YELLOW
|
FFFF33
|
FFFF66
|
FFFF99
|
FFFFCC
|
CCCC00
|
999900
|
666600
|
333300
|
FUCHSIA
|
FF33FF
|
FF66FF
|
FF99FF
|
FFCCFF
|
CC00CC
|
990099
|
660066
|
330033
|
TEAL
|
7D337D
|
7D667D
|
7D997D
|
7DCC7D
|
E100E1
|
CC00CC
|
AF00AF
|
990099
|
FF3300
|
FF3333
|
FF3366
|
FF3399
|
FF33CC
|
FF33FF
|
FF6600
|
FF6633
|
FF6666
|
FF6699
|
FF66CC
|
FF66FF
|
FF9900
|
FF9933
|
FF9966
|
FF9999
|
FF99CC
|
FF99FF
|
FFCC00
|
FFCC33
|
FFCC66
|
FFCC99
|
FFCCCC
|
FFCCFF
|
FFFF00
|
FFFF33
|
FFFF66
|
FFFF99
|
FFFFCC
|
FFFFFF
|
CC0000
|
CC0033
|
CC0066
|
CC0099
|
CC00CC
|
CC00FF
|
CC3300
|
CC3333
|
CC3366
|
CC3399
|
CC33CC
|
CC33FF
|
CC6600
|
CC6633
|
CC6666
|
CC6699
|
CC66CC
|
CC66FF
|
CC9900
|
CC9933
|
CC9966
|
CC9999
|
CC99CC
|
CC99FF
|
CCCC00
|
CCCC33
|
CCCC66
|
CCCC99
|
CCCCCC
|
CCCCFF
|
CCFF00
|
CCFF33
|
CCFF66
|
CCFF99
|
CCFFCC
|
CCFFFF
|
990000
|
990033
|
990066
|
990099
|
9900CC
|
9900FF
|
993300
|
993333
|
993366
|
993399
|
9933CC
|
9933FF
|
996600
|
996633
|
996666
|
996699
|
9966CC
|
9966FF
|
999900
|
999933
|
999966
|
999999
|
9999CC
|
9999FF
|
99CC00
|
99CC33
|
99CC66
|
99CC99
|
99CCCC
|
99CCFF
|
99FF00
|
99FF33
|
99FF66
|
99FF99
|
99FFCC
|
99FFFF
|
666600
|
666633
|
666666
|
666699
|
6666CC
|
6666FF
|
669900
|
669933
|
669966
|
669999
|
6699CC
|
6699FF
|
66CC00
|
66CC33
|
66CC66
|
66CC99
|
66CCCC
|
66CCFF
|
66FF00
|
66FF33
|
66FF66
|
66FF99
|
66FFCC
|
66FFFF
|
336600
|
336633
|
336666
|
336699
|
3366CC
|
3366FF
|
339900
|
339933
|
339966
|
339999
|
3399CC
|
3399FF
|
006600
|
006633
|
006666
|
006699
|
0066CC
|
0066FF
|
009900
|
009933
|
009966
|
009999
|
0099CC
|
0099FF
|
33CC00
|
33CC33
|
33CC66
|
33CC99
|
33CCCC
|
33CCFF
|
00CC00
|
00CC33
|
00CC66
|
00CC99
|
00CCCC
|
00CCFF
|
33FF00
|
33FF33
|
33FF66
|
33FF99
|
33FFCC
|
33FFFF
|
00FF00
|
00FF33
|
00FF66
|
00FF99
|
00FFCC
|
00FFFF
|
663300
|
663333
|
663366
|
663399
|
6633CC
|
6633FF
|
660000
|
660033
|
660066
|
660099
|
6600CC
|
6600FF
|
333300
|
333333
|
333366
|
333399
|
3333CC
|
3333FF
|
003300
|
003333
|
003366
|
003399
|
0033CC
|
0033FF
|
330000
|
330033
|
330066
|
330099
|
3300CC
|
3300FF
|
000000
|
000033
|
000066
|
000099
|
0000CC
|
0000FF
|
No hay comentarios:
Publicar un comentario