300x250 AD TOP

Mostrando las entradas con la etiqueta html. Mostrar todas las entradas
Mostrando las entradas con la etiqueta html. Mostrar todas las entradas

sábado, 28 de septiembre de 2013

Etiquetado Como: , , ,

LA WEB SEMANTICA Y EL HMTL 5 SEMANTICO

Se ha oído hablar  mucho de esto pero hoy trataremos de dejarlo entendible y ver de que vá cada concepto y porque es necesario saberlo y aplicarlo.

LA WEB SEMÁNTICA

La Web Semántica vendría a ser una extensión de la Web actual dotada de significado, esto es, un espacio donde la información tendría un significado bien definido, de manera que pudiera ser interpretada tanto por agentes humanos como por agentes computarizados.

Esto es importante debido que hasta ahora muchos desarrolladores, maquetadores, etc no aplican esto, para que exista una Web Semántica es necesario aplicar el HTML SEMANTICO.

EL HTML SEMÁNTICO

Llamamos html semántico a un documento que usa correctamente las etiquetas html para que la estructura resultante, quitándole la capa de diseño, tenga sentido por si sola. Así, si yo uso 300 divs o sections en mi página por mucho que con CSS dibuje cajas y añada fondos de mil colores sin este CSS no estoy diciendo que es cada parte de mi web. Es cuando me preocupo de que cada caja del HTML tenga sentido cuando mi HTML empieza a tener significado y por tanto los buscadores van a poder entender mejor cada uno de nuestros contenidos.

El problema es que la mayoría vemos a un documento web, como algo distinto a un documento normal, y corriente, lo que tendríamos que hacer es imaginar por ejemplo un periódico, si observamos veremos que este tiene secciones bien definidas, así si lo observamos bien parece un blog, tiene un titulo grande indicando el nombre del periódico o diario, si esto lo llevásemos a una Pagina Web, pues seria nuestro "header" luego tiene otro titulo grande resaltando que es la mejor noticia que tienen y una imagen que guarda relación con ello, como ahi no se pueden hacer hipervinculos, nos indica la pagina en la que esta ampliada esa noticia, al lado derecho de esa gran imagen por lo general tienen otras pequeñas imágenes con pequeños títulos, si lo llevamos a una Pagina Web seria nuestro "Banner o Slider (Donde pasamos lo mas importante del sitio que queremos mostrar) ", luego de ellos abajo  otras noticias que por le general son eventos o publicidad contratada, ya saben eso puede ser nuestra publicidad Web también, y por ultimo viene el de pie de pagina y esto en una Pagina Web seria nuestro footer. Espero haberlo explicado bien hasta ahí, entonces como generalmente lo hacíamos seria así :


Si observamos veremos que nuestro HTML esta en secciones con "id" que dicen que son cada cosa pero otro maquetador pudo a ver puesto otros nombre de "id" y tampoco nosotros entenderiamos que que es cada cosa al igual  para un navegador o motores de búsqueda esos solo son div's con información dentro que no indican que función tienen, a diferencia que yo use una etiqueta " li " que los navegadores sabrían que es el ítem de una lista, entonces es ahi donde ingresa el HTML5 semántico para darnos una visión diferente :



En este caso el navegador, usted y yo sabremos que es realmente cada cosa, entonces el HTML5 trae etiquetas que nos ayudan a hacer de nuestro código algo mas entendible, esto tiene muy buenas aplicaciones empezando desde la semántica para nosotros hasta el SEO, para las paginas que escribamos de esta manera. 

Bien para no hacer mas largo este post, pues lo dejare hasta ahi, si tiene algunas dudas escribanas que responderé y ayudare en lo que este a mi alcance. :) 








sábado, 7 de septiembre de 2013

Etiquetado Como: ,

Hola Mundo HTML 5

Tercer capitulo del  "Curso de HTML y HTML5 desde cero "
Puedes ver todos los capítulos en el Indice del Curso

Se que muchos estarán preguntándose porque recién haremos un Hola Mundo, pues es necesario un poco de Teoría antes de empezar la practica, y mejor si aprendemos buenas practicas al empezar, esto nos asegura que haremos bien nuestro trabajo.

El fabuloso Hola Mundo:


<!DOCTYPE html>
<html>
<head> 
  <tittle> Mi Primer Hola Mundo </tittle>
</head> 
<body> 
  <h1> Hola Mundo,!! </h1>
</body>
</html>

Este seria el código para un "Hola Mundo", si hay dos nuevas etiquetas: tittle y  h1 y que es lo que son?, pues la etiqueta "tittle " seria el titulo de la pagina  y es lo que se vería en la parte de arriba del navegador, y h1 es la etiqueta de Titulo 1,  existen otras etiquetas de Titulo, h1  h2,h3,h4,h5,h6  y todas estas suponen una jerarquía: 

H1 - Titulo Principal
H2 - Sub Titulo 1
H3 -  Sub Titulo 2

... y así sucesivamente.

Otra etiqueta con la que mostremos contenido y sera bastante usada sera la etiqueta <p> y en ella se escribe el texto que queremos mostrar que no es un titulo por ejemplo :


<!DOCTYPE html>
<html>
<head> 
  <tittle> Mi Primer Hola Mundo </tittle>
</head> 
<body> 
  <h1> Hola Mundo,!! </h1>
  <p> Esta etiqueta es una etiqueta párrafo, etiqueta que usaremos para escribir los párrafos que necesitemos mostrar </p>
</body>
</html>

Bien hasta ahi ya sabemos como poner un titulo y un párrafo de manera correcta en HTML. nuestro siguiente capitulo mostrare como usar otras etiquetas HTML5 que se usan para dar sentido a nuestra pagina Web.

domingo, 25 de agosto de 2013

Etiquetado Como: ,

Buenas practicas HTML para empezar

Segundo capitulo del  "Curso de HTML y HTML5 desde cero "
Puedes ver todos los capitulos en el Indice del Curso

En este capitulo empezaremos a escribrir codigo HTML, para ello nesecitaremos :

- Un Editor de Texto plano, nos sirve el famoso block de notas aunque preferiria que usen,  Sublime Text (Link de Pag. Oficial para descargar).


Creando nuestro primer archivo .html

Creemos un archivo de texto, luego a este le cambiamos la extension de miarchivo.txt a miarchivo.html  ; ahora editemos el archivo con nuestro editor de texto.

Con lo primero que se inicia una Pagina web es con "la declaracion de documento", esto es un estandar en web y no se debe dejar pasar por ningun motivo, entonces en la primera linea deberia ir de esta manera.

Para HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">



Para HTML 5

<!DOCTYPE html>

Si se están preguntado porque hay una diferencia tan grande en la declaración del DOCTYPE es  porque en versiones anteriores del HTML se basaba el lenguaje en SGML, por lo que había que especificar el DTD, pero en HTML5 no se basan en SGML, por lo que no hay necesidad de especificar el DTD y por tanto con un único DOCTYPE es suficiente. Adicionalmente a ello no debemos ver a la declaración del DOCTYPE como una etiqueta, si no como una declaración del lenguaje que estás utilizando.

Primeras etiquetas HTML

<html>

<head> </head>

<body> </body>

</html>  

Digamos que estas son las etiquetas básicas para iniciar explicaremos un poco de cada una de ellas:

<html> Esta etiqueta indica el comienzo del documento HTML,cuya función es servir de apertura y cierre al archivo. Las marcas <HTML></HTML> indican al navegador que el documento está marcado en HTML.

<head> Esta etiqueta se colocan inmediatamente después de la apertura de la marca <html> y cierran el encabezamiento propiamente dicho del documento; es decir toda la información que necesita el navegador, el servidor de web y los motores de búsqueda. Se trata del primer elemento que lee el navegador y, por ello, es el mejor lugar para insertar sintaxis script . Dentro de <head></head> se introduce el título del documento y otros datos, todo esto lo veremos mas adelante.

<body> se coloca inmediatamente después del cierre de la marca </head> y, en cualquier caso, dentro de los elementos <html></html>. Si el elemento <head> contenía meta-información (es decir, datos no visualizados materialmente por el navegador) la función de la marca <body> es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página.

Todas las paginas contienen esas etiquetas, debido a que son requeridas para estructurar una pagina Web, hasta ahí tenemos las estructura pero aun no tenemos ninguna información visible. Nuestro documento estaría quedando de esta manera:


<!DOCTYPE html>

<html>

<head> </head> 

<body> </body>

</html>


Nuestro siguiente capitulo incluiremos contenido visible en nuestra pagina.

sábado, 17 de agosto de 2013

Etiquetado Como: ,

INTRODUCCIÓN A LA WEB Y EL HTML



Antes de empezar a hablar sobre HTML, deberiamos conocer  un poco sobre la WEB; La World Wide Web (WWW) o Red informática mundial es un sistema de distribución de información basado en hipertexto o hipermedios enlazados y accesibles a través de Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener textoimágenesvídeos u otros contenidos multimedia, y navega a través de esas páginas usando hiperenlaces.

Entonces resumiendo seria de esta manera: Internet -> La WWW -> Sitio WEB -> Pagina WEB -> Contenidos.

Dicho esto dejemos en claro que una Pagina Web, (o página electrónica, según el término recomendado por la R.A.E.) es el nombre de un documento o información electrónica adaptada para la World Wide Web y que puede ser accedida mediante un navegador . Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación a otras páginas web mediante enlaces de hipertexto. Las páginas web frecuentemente incluyen otros recursos como hojas de estilo en cascada, guiones (scripts) e imágenes digitales, entre otros.

Las páginas web pueden estar almacenadas en un equipo local o un servidor web remoto.

Ahora ya sabemos que no es necesario tener un Servidor WEB para poder construir nuestras paginas web, así que con nuestra computadora incluso sin estar conectada a Internet podremos hacerlo. En esta ultima parte es donde ingresa el HTML, y es usada para describir y traducir la estructura y la información en forma de texto de una pagina Web, recordemos que una pagina Web no es siempre HTML, pero esto lo veremos mas adelante. 

Versiones del HTML

Los estándares oficiales HTML son el HTML 2.0, el HTML 3.2, el HTML 4.0 y el HTML 4.01, aunque actualmente se trabaja en el HTML 5. El HTLM 5 ya está empezando a ser usado aunque todavía no es una especificación oficial. El XHTML, una forma más avanzada del HTML que se suponía iba a sustituir a éste, va a quedar integrado dentro del HTML 5.


HTML 2.0
En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML, es decir, el HTML 1.0 no existió como estándar. HTML 2.0 no soportaba tablas.
Se simplificaba al máximo la estructura del documento para agilizar su edición, donde la declaración explícita de los elementos body, html y head es opcional.
HTML 3.2
La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de HTML publicada por el W3C (Consorcio internacional). Esta revisión incorporó los últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.
HTML 4.01
La última especificación oficial de HTML se publicó en diciembre de 1999 y se denomina HTML 4.01. Desde la publicación de HTML 4.01, el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group) que comenzó el desarrollo del HTML 5, cuyo primer borrador oficial se publicó en enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML, y actualmente W3C está trabajando para el lanzamiento del estándar HTML 5.0, dentro del cual ha decidido integrar el XHTML.
HTML 5.0 Y HTML 5.1El consorcio internacional W3C marcó las siguientes fechas para liberación de los estándares de especificación: 2014 para HTML 5.0, 2016 para HTML 5.1 y 2018 para HTML 5.2


Actualmente la versión de HTML más utilizada es la 4.01. Esta versión fue definida por la W3C (Comité Internacional que define los estándares web) hace varios años. Actualmente ya está disponible la nueva versión de HTML, denominada HTML 5. Esta versión ya se está usando de modo experimental y se espera que se imponga como estándar en los próximos años.

Y donde quedo el HTML 1?  pues esta version nunca se lanzo, ahora con los conceptos basicos para empezar haremos nuestros primeros codigos HTML esto en nuestro siguiente capitulo.