CÓMO USAR LAS CLASES (CLASS) E ID's (ID) EN CSS

Todos hemos escuchado alguna vez aquello de que los ids o clases no pueden comenzar con un número. Y todos, estoy seguro, damos la sentencia por buena

Sin embargo, el aceptar esta afirmación dicha de forma tan simple y ambigua da lugar a errores, pues así expresada es de todo punto errónea por inexacta.

Lo primero que debemos hacer, es tener claro que hay que diferenciar el lenguaje Html del lenguaje Css, lo que le es propio a cada uno de ellos y lo que uno u otro permite o prohíbe. Esto es, utilizar la terminología y sintaxis de cada uno de ellos con propiedad.

La mezcla de conceptos distintos, el asumir que lo que es válido en uno lo es en otro o no distinguir cuándo se referencia a uno u otro da lugar a errores típicos como hablar de atributos o elementos en el ámbito de Css o la afirmación que nos ocupa. Incluso

Aclarando la cuestión del inicio por un número de ids o clases

 Así que antes de seguir tienes que tener muy claro que una cosa son los elementos del html y sus partesd  y otra muy distinta los selectores de Css. Pese a la íntima relación que existe entre ellos no hay que confundir el valor del atributo de id o clase en el marcado html con el selector de clase o de id en las hojas de estilos. 

 Una cosa son los elementos del Html
y otra muy distinta los selectores de Css.

Una cosa es el atributo (de clase o de id) y su valor en el lenguaje Html
y otra cosa muy distinta los selectores de ids o de clases en Css. 

En el lenguaje html

Nada impide que en el marcado del documento html el valor del atributo id o del atributo clase comience por un número. Es totalmente lícito y funcional. Es más, en según qué circunstancias, será lo correcto y la única manera de hacerlo.

                                 

El código Html anterior es totalmente válido y si lo pasas por el validador verás que no marca ni error ni advertencia porque el valor de los atributos class e id comienzan por números. Además el enlace cuyo atributo href es un número también funcionará perfectamente.

En el lenguaje Css

Es exclusivamente en el ámbito del lenguaje Css donde es cierta la afirmación que dice que el nombre de un selector Css no puede comenzar por un número:

 

los identificadores (incluyendo los nombres de los elementos, clases e ID de los selectores) pueden contener sólo caracteres [A-Za-z0-9] y los caracteres 161 en adelante en ISO 10646, más el guión (-); no pueden comenzar con un guión o un número. También pueden contener caracteres con escape y cualquier carácter de ISO 10646 en forma de código numérico (ver el siguiente ítem). Por ejemplo, el identificador "B&W?" puede escribirse como "B\&W\?" o "B\26 W\3F".

O siendo más precisos, la especificación dice:

1. que el nombre de un selector Css de clase o de id no puede tener un número inmediatamente a continuación del símbolo '.' o '#' que identifica el tipo de selector que es.
2. que inmediatamente tras el indicador del tipo de selector '.' o '#' tampoco puede ir alguno de los carácteres no permitidos.
3. que hay una serie de carácteres que no pueden formar parte del nombre de los selectores, con independencia del lugar que ocupen dentro de él. Como @ >, étc.

Y hago esta última puntualización porque a un elemento del html con cierto valor en su atributo class o id podemos referenciarlo en la hoja de estilos utilizando distintos selectores: con el selector de id o clase y con el selector de atributo, por ejemplo, o haciendo uso de los selectores de pseudoclase o con los combinadores >, ~, /ref/ étc).

 Permitiendo iniciar selectores Css con un número

Llegados a este punto en el que tenemos un valor que en html es válido y funcional y que las especificaciones de Css no permiten utilizar la cuestión es cómo resolver la colisión.

La respuesta tradicional y más popular es recomendar no usar en html valores para esos atributos que comiencen por números. Repito, no porque no lo permita el propio html, que sí lo admite.

Pero ¿y si ya te lo encuentras y tienes la necesidad de utilizar ese valor y no tienes acceso al html o al archivo que lo genera?

Tienes dos vías para lograrlo. La primera es utilizar en el Css el selector de atributo. Ese que se conforma con corchetes [ ].

                                 

Pero anterior a la llegada de este tipo de selector por valor de atributo la especificación Css ya proveyó una forma de poder utilizar un selector de clase o id que comience por un número o cualquier otro carácter de los no permitidos por la especificación.

Para ello definió la barra invertida \ como carácter de "escape Css". Aspecto que sigue siendo válido e incluido en la última recomendación selector level 3.

Así, en el caso de querer o necesitar que un selector de clase o id comience en la hoja de estilos, o dentro del elemento <style> en el html, por un número o cualquier otro carácter no permitido en Css sólo hay que "escaparlo":

                                  

COLORES HEXADECIMALES

Todos los colores parten de una mezcla de colores primarios: rojo, azul y verde. Para representar los colores en web o html se utilizan los números hexadecimales.

Los números hexadecimales puede utilizar 16 valores diferentes utilizando letras y números. Los colores web son 216 colores seguros y se deben ver igual en todo tipo de equipo y navegador.

Los colores se representan con 6 letras empezando con el # los primeros 2 dígitos representan el rojo, los siguientes 2 el verde y los últimos 2 l azul. es por ello que se le llama RGB (Red, Green, Blue) al modelo.

Si deseas construir colores hexadecimales en tu diseño puedes consultar esta pagina web
colorhexa.com donde tenemos una explicación fundamentada de como se crea el color, sus valores y como utilizarlos.

Aunque es el método más complicado para indicar los colores, se trata del método más utilizado con mucha diferencia. De hecho, prácticamente todos los sitios web reales utilizan exclusivamente este método.

Para entender el modelo RGB hexadecimal, en primer lugar es preciso introducir un concepto matemático llamado sistema numérico hexadecimal. Cuando realizamos operaciones matemáticas, siempre utilizamos 10 símbolos para representar los números (del 0 al 9). Por este motivo, se dice que utilizamos un sistema numérico decimal.

No obstante, el sistema decimal es solamente uno de los muchos sistemas numéricos que se han definido. Entre los sistemas numéricos alternativos más utilizados se encuentra el sistema hexadecimal, que utiliza 16 símbolos para representar sus números.

Como sólo conocemos 10 símbolos numéricos, el sistema hexadecimal utiliza también seis letras (de la A a la F) para representar los números. De esta forma, en el sistema hexadecimal, después del 9 no va el 10, sino la A. La letra B equivale al número 11, la C al 12, la D al 13, la E al 14 y la F al número 15.

Definir un color en CSS con el método RGB hexadecimal requiere realizar los siguientes pasos: - Determinar las componentes RGB decimales del color original, por ejemplo: R = 71, G = 98, B = 176 - Transformar el valor decimal de cada componente al sistema numérico hexadecimal. Se trata de una operación exclusivamente matemática, por lo que puedes utilizar una calculadora. En el ejemplo anterior, el valor hexadecimal de cada componente es: R = 47, G = 62, B = B0 - Para obtener el color completo en formato RGB hexadecimal, se concatenan los valores hexadecimales de las componentes RGB en ese orden y se les añade el prefijo #. De esta forma, el color del ejemplo anterior es #4762B0 en formato RGB hexadecimal.

Siguiendo el mismo ejemplo de las secciones anteriores, el color del párrafo se indica de la siguiente forma utilizando el formato RGB hexadecimal:

p { color: #4762B0; }

Recuerda que aunque es el método más complicado para definir un color, se trata del método que utilizan la inmensa mayoría de sitios web, por lo que es imprescindible dominarlo. Afortunadamente, todos los programas de diseño gráfico convierten de forma automática los valores RGB decimales a sus valores RGB hexadecimales, por lo que no tienes que hacer ninguna operación matemática:

¿Cómo utilizar los códigos de color?

 Con los códigos de color puedes fijar el color del fondo del Web site, el color de fuentes, las células en tablas y mucho más.

Usar los códigos de color para el color del fondo del Web site:

Para convertir los colores puede utlizar esta página CLIC AQUI

LOREM IPSUM

El lorem ipsum, un texto de relleno muy utilizado en diseño gráfico

Lorem ipsum es, básicamente, un texto de relleno (dummy text) que, habitualmente, se utiliza en diseño gráfico, web o editorial para suplantar un texto que no ha sido entregado por el cliente, para hacer demostraciones tipográficas o borradores para crear diseños visuales antes de insertar el texto final (greeking text). 

Se utiliza este texto en los diseños para que, al estar escrito en un lenguaje clásico y no entenderse, los clientes se centren en el diseño y no en el texto, ya que es habitual que, si se entiende, toman más atención al contenido del texto. 

Una de las cualidades del texto en cuestión es que tiene una distribución de las letras similar a las del inglés. 

Aunque la frase no tiene sentido, tiene una larga historia. Durante varios siglos, los tipógrafos han utilizado esta frase para mostrar las características más distintivas de sus fuentes. Se utiliza porque las letras que contiene y el espaciado entre caracteres de esas combinaciones revelan de la mejor forma posible el espesor, el diseño y otras características importantes del tipo de letra.

Un ejemplar de 1994 de la revista "Before & After" asocia "Lorem ipsum ..." a una versión latina revuelta de un pasaje de de Finibus Bonorum et Malorum, un tratado sobre la teoría de la ética escrito por Cicerón en el año 45 A.C. El pasaje "Lorem ipsum..." se ha extraído del texto que dice "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...", que se traduciría como "No hay nadie que ame el dolor mismo, que lo busque y lo quiera tener, simplemente porque es el dolor...".

Durante los años 1500, una imprenta adaptó el texto de Cicerón para elaborar una página de ejemplos de tipografía. Desde entonces, el texto en latín ha sido la norma del sector de la tipografía para simular texto. Antes de que existiera la publicación electrónica, los diseñadores gráficos tenían que simular diseños utilizando líneas ficticias para indicar texto. La llegada de hojas autoadhesivas preimpresas con "Lorem ipsum" ofreció una manera más realista de indicar dónde debería ir el texto en una página.

Suele despertar curiosidad saber qué significa. Sin embargo, este texto carece de significado. Esto se debe a que cuando el texto es legible, los usuarios suelen centrarse en lo que dice el texto y no en el diseño, que es el objetivo en este caso.

Una de las cualidades del texto en cuestión es que tiene una distribución de las letras similar a las del inglés. 

Existen múltiples variantes del texto original, algunas sin casi parecido con él. Estas versiones incluyen letras adicionales que no son comunes en latín (como la k, w y z).

¿Dónde encontrarlo?

Si deseas conseguir una versión completa de este texto existe una página en la que no solo lo puedes conseguir sino que lo puedes dividir en diferentes parrafos o filtrar un número concreto de palabras.

        El texto completo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Descargar libro Fundamentos De Programacion Con Visual Basic 6 de Blitzkrieg

Diseño web Responsive o web Adaptive | Diferencias

Hoy en día nuestros sitios web deben verse en todos los dispositivos, la razón principal es que cada vez más personas consumen información desde dispositivos diferentes a sus computadoras. Más aún, estas personas esperan recibir el contenido del sitio en un formato que les facilite consumirlo en el dispositivo en que se encuentran.

Esta tarea puede ser lograda de dos formas diferentes y es aquí donde entran los conceptos de adaptive y responsive.

La pregunta del millón es: ¿cuál debemos eligir? Para responder esto, primero hay que entender la diferencia entre ambos conceptos.

¿Qué es un diseño adaptive?

 Un diseño adaptive es aquel que se realiza pensando exclusivamente en cómo quedará nuestro diseño en uno o varios dispositivos. En este paradigma, el servidor web evalúa el tipo de dispositivo en que el usuario se encuentra y despliega un contenido adaptado o más bien creado directamente para ese dispositivo.

Ventajas del diseño adaptive

• El contenido desplegado es único para ese dispositivo, por lo que no tiene información que pertenece a otros y esto logra que la carga de la página se haga más rápida
• La decisión de que contenido mostrar, no pertenece al dispositivo sino que el servidor se encarga de hacer los cambios, por lo tanto el dispositivo consume menos recursos
• Puede tener una mejor experiencia de usuario dependiendo del proyecto pues obliga a crear un diseño estrictamente para el dispositivo y lo que quisiéramos que el usuario consumiera

Desventajas del diseño adaptive

Las desventajas principales del diseño adaptive son el costo y lo que llamaría la “miopía de la información”. Estos dos factores están entrelazados y de forma inversamente proporcional: a menor el costo en tiempo y esfuerzo mayor la miopía. ¿Por qué?

El asunto de la miopía se da, porque por lo general los encargados de experiencia e interfaz de usuario están tratando de evaluar que información quisiera un usuario a través de suposiciones. Más aún, el enfoque de trabajo del cual parten tiende a ser “qué remover” de la versión para computadoras. Esto al final tiende a crear un vacío de información de ese grupo de usuarios que ahora prefiere ir al sitio desktop, pues no encuentra lo que quiere. ¿No le ha pasado? Entra a un sitio y sólo busca como ir a sitio desktop porque no está lo que anda buscando.

Para poder crear un diseño adaptive correctamente debe realizar esfuerzo importante que involucre grupos de enfoque y una muestra de los diferentes usuarios. Aún con todo este esfuerzo, puede hacerse difícil dar en el clavo. Con esto se puede evidenciar el tipo de costos que generaría el realizar reuniones con estos grupos y pruebas de experiencia de usuario. Si no se emplea este esfuerzo, el resultado del producto sería deficiente y miope.

¿Qué es un diseño responsive?

Un diseño responsive es el que comparte el contenido de la página sin tomar en cuenta desde que dispositivo viene, sino la resolución de pantalla del mismo.

Cómo cualquier cosa en nuestras vidas, profesiones y acontecimientos hay ventajas y desventajas de cada uno de estos paradigmas. Por lo general, la decisión de utilizar uno u otro dependerá enteramente del tipo de consumidor del portal y el propósito de lo que viene a lograr con la página que se le presenta.

Ventajas del diseño responsive

• Es mucho menos costoso que el adaptive pues no hay que crear una experiencia única para cada dispositivo
• Unifica la experiencia de los usuarios hacia el sitio. Se ve familiar a lo que han consumido en otros dispositivos y en consecuencia se les hace más fácil interactuar con él
• Se enfoca en como desplegar el contenido presentado a los dispositivos partiendo en de perspectiva de la computadora y no promueve el concepto de “que remover”

Desventajas del diseño responsive

• Pasa toda la responsabilidad de procesamiento y decisión de como se mostrará la página al dispositivo
• Se consume más del plan de datos del usuario pues se descargan elementos que tal vez no se presentan en este dispositivo
• No se puede crear una experiencia personalizada para un dispositivo

Entonces… ¿cuál elegir?

La realidad es que depende, pues dependerá de los consumidores finales:

• ¿Quiénes son?
• ¿Cuáles son sus intereses?

También depende del negocio y el producto web:

• ¿Cuáles son los objetivos del negocio, marca o emprendimiento?
• ¿Qué quiere ofrecer y dar a conocer?
• ¿Los consumidores no deben tener acceso a consumir de ese contenido en ese dispositivo?

Ambas herramientas son válidas y la decisión de “qué es adecuado” debe venir de un entendimiento de las necesidades del cliente. Una de las frases más conocidas e importantes para alguien que se dedique a la industria de la producción ya sea web, aplicaciones o software en general es que “No hay balas de plata”. Intente utilizar la herramienta que más le convenga para la batalla que va a librar en ese momento y no aplicar lo mismo ante todas las situaciones.

Permítanos asesorarlos para que su página web le genere los resultados esperados. Desarrolle con nosotros una página web de calidad, logrando el retorno de su inversión. Conozca más sobre nuestra consultoría web o sobre el servicio de diseño y desarrollador web.

CSS

CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores. CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada.

¿Para qué sirve?

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

Sintaxis

CSS tiene una sintaxis muy sencilla, que usa unas cuantas palabras clave tomadas del inglés para especificar los nombres de varias propiedades de estilo.

Una hoja de estilo se compone de una lista de reglas. Cada regla o conjunto de reglas consiste en uno o más selectores y un bloque de declaración (o «bloque de estilo») con los estilos a aplicar para los elementos del documento que cumplan con el selector que les precede. Cada bloque de estilos se define entre llaves, y está formado por una o varias declaraciones de estilo con el formato propiedad:valor;.<!R0>

En el CSS, los selectores marcarán qué elementos se verán afectados por cada bloque de estilo que les siga, y pueden afectar a uno o varios elementos a la vez, en función de su tipo, nombre (name), ID, clase (class), posición dentro del Document Object Model, etcétera.<!R1>

Abajo puede verse un ejemplo de una parte de una hoja de estilos CSS:

selector [, selector2, ...] [:pseudo-class][::pseudo-element] {

 propiedad: valor;

 [propiedad2: valor2;

 ...]

}

/* comentarios */

Uso

Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <h2>.Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <h1> debía disponer de la información si se deseaba un diseño consistente para una página y, además, una persona que leía esa página con un navegador perdía totalmente el control sobre la visualización del texto.

Cuando se utiliza CSS, la etiqueta <h1> no debería proporcionar información sobre cómo será visualizado, solamente marca la estructura del documento. La información de estilo, separada en una hoja de estilo, específica cómo se ha de mostrar <h1>: color, fuente, alineación del texto, tamaño y otras características no visuales, como definir el volumen de un sintetizador de voz

Por otro lado, antes de que estuviera disponible CSS, la única forma de componer espacialmente una página era el uso de tablas <table>. Aunque esta era una técnica cómoda y versátil, ello conllevaba el uso de un elemento con una semántica particular, y en el que la distribución de los datos no se ajustaban al flujo de la información que se obtenía en la vista desde los navegadores habituales, lo que redundaba en una merma en la accesibilidad a la página por parte de otros navegadores (orientados a personas con alguna deficiencia sensorial, o a ciertos dispositivos electrónicos).

Mediante el uso de CSS, se ha permitido eliminar el uso de tablas para el diseño, usándolas solamente para la muestra de datos tabulados, si bien es cierto que obtener la versatilidad que ofrecía el diseño con tablas, es algo más complicado si no se usan.

Formas de usar CSS

Para dar formato a un documento HTML, puede emplearse CSS de tres formas distintas:

1. Un estilo en línea (inline) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro o estructurado que debería ser, pero funciona.

Dado que los clientes de correo electrónico no soportan las hojas de estilos externas, y que no existen estándares que los fabricantes de clientes de correo respeten para utilizar CSS en este contexto, la solución más recomendable para maquetar correos electrónicos, es utilizar CSS dentro de los propios elementos (inline).

2. Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML, dentro del elemento <head>, marcada por la etiqueta <style>. De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página Web.

3. Una hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.

Estilos CSS introducidos por el usuario que ve el documento, mediante un archivo CSS especificado mediante las configuraciones del navegador, y que sobreescribe los estilos definidos por el autor en una, o varias páginas web.

Los estilos marcados "por defecto" por los user agent, para diferentes elementos de un documento HTML, como por ejemplo, los enlaces.

HTML

HTML (HyperText Mark-Up Language) es lo que se conoce como "lenguaje de marcado", cuya función es preparar documentos escritos aplicando etiquetas de formato. Las etiquetas indican cómo se presenta el documento y cómo se vincula a otros documentos.

HTML se usa también para la lectura de documentos en interneT desde diferentes equipos gracias al  protocolo HTTP, que permite a los usuarios acceder, de forma remota, a documentos almacenados en una dirección específica de la red, denominada dirección URL.

La World Wide Web (WWW), o simplemente la Web, es la red mundial formada por todos los documentos (llamados "páginas Web") conectados entre sí por hipervínculos.

A menudo, las páginas web se organizan alrededor de una página principal que actúa como eje central para buscar otras páginas con hipervinculos. Este grupo de páginas Web unidas por hipervínculos y centradas alrededor de una página principal se llama sitio Web.

La Web es un amplio archivo dinámico compuesto de una gran variedad de sitios Web y que permite el acceso a páginas Web que contienen texto formateado, imágenes, sonidos, videos, etc.

HISTORIA 

Internet nació gracias a ARPANET, un proyecto militar desarrollado con la finalidad de mantener una red de transmisión de paquetes entre ordenadores. ARPANET data de 1969 y sus desarrolladores pretendían que sirviera como arma defensiva en caso de una guerra nuclear. De esta forma, si se atacaba una ciudad de Estados Unidos, el resto de nodos (usuarios) de ARPANET se enteraría de los acontecimientos y podría mantener el flujo de las comunicaciones.

Los desarrolladores de ARPANET comenzaron a investigar protocolos para transmitir paquetes de información. Su primer logro fue el desarrollo del protocolo TCP, que todavia se utiliza a en la mayoría de redes, y posteriormente inventaron otros como el protocolo para el correo electrónico, el FTP para la transferencia de archivos...

En los años 80 se crea una red paralela, la NSFNET, para científicos y a la que algunas personas tenían acceso, sobre todo en universidades. Pero nadie se planteó crear un protocolo para transmitir datos con formato. Era posible transmitir información y archivos pero no archivos con interactividad que se transmitieran y fueran mostrados.

Lo que se hizo fue basarse en un lenguaje ya inventado denominado SGML, el cual se basaba en etiquetas tipo <etiqueta atributo="valor">, para crear un lenguaje que indicara cómo se ven la información en forma de hipertexto. Con esto nació el HTML, que tenía etiquetas SGML, como <a href="http://wwwgoogle.com"> (algo así como <vínculo dirección="google.es">).

En los años 90 el protocolo salió a la luz junto a la INTERNET, cuando se abandonaron ARPANET y NSFNET y se usó INTERNET únicamente para un público abierto de forma que todos pudieramos usarlo. Con ello, se utilizó el protocolo HTTP para que desde nuestras casas llamáramos a otro ordenador y éste nos enviara el código HTML de la página a nuestro ordenador.

De esto se encarga un navegador, que nos permite contactar con el susodicho ordenador y cuando la página se envíe mostrarla. El navegador interpreta el código HTML y nos lo muestra. SINTAXIS BÁSICA DE HTML 

 
<html> 
<head> 
<title>Título</title> 
</head> 
<body> 
Texto del documento, menciones a gráficos, enlaces, etc. 
</body> 
</html> 
 

PRINCIPALES ETIQUETAS DE HTML

ETIQUETA		CONCEPTO
<html>		Define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.
<script>		incrusta un script en una web, o se llama a uno mediante src="url del script"
<head>        </head>		define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario
<title>:		Define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.
<link>:		Para vincular el sitio a hojas de estilo o iconos.
<style>		Para colocar el estilo interno de la página; ya sea usando CSS, u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>.
<body>      </body>		Define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes.
<h1> a <h6>:		Encabezados o títulos del documento con diferente relevancia.
<table>        </table>		Define una tabla.
<tr>:		Fila de una tabla.
<td>      </td>		Celda de una tabla (debe estar dentro de una fila).
<a>		hipervínculo o enlace, dentro o fuera del sitio web
<div>:	División de la página.
<img>	Imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen.
<li><ol><ul>:	Etiquetas para listas.
<b>  ó   <strong>	texto en negrita
<i>    ó   <em>	texto en cursiva
<s>     ó  <del>	texto tachado
<u>           </u>	texto subrayado
<blockquote>         </blockquote>	Sangrado.
<br>	Salto de línea.
<caption>        </caption>	Establece el título de una tabla. Dentro de <table>.
<center>       <center>	Centra en horizontal.
<font>           </font>	Fuente.
<form>            </form>	Formulario
<frame>           </frame>	Marco.
<frameset>     </frameset>	Estructura de los marcos.
<h1>       </h1>	Encabezado de primer orden
<hr>	Línea de separación horizontal.
<iframe>	Marco en línea. Carga en un marco otra página.
<ol>	Lista numerada de objetos.
<p>                   </p>	Párrafo nuevo.
<sub>               </sub>	Subíndice.
<sup>              </sup>	Superíndice.

BIBIOGRAFIA

http://es.wikibooks.org/wiki/Lenguaje_HTML/Introducci%C3%B3n
http://es.slideshare.net/renatocastillo372/savedfiles?s_title=etiquetas-mas-utilizadas-del-lenguaje-html&user_login=17kliss