TEMÁTICA PAGINAS WEB Y LENGUAJE DE MARCADO HTML
PAGINAS WEB
Un sitio web es un lugar virtual en la red que guarda contenido para que la gente tenga acceso a él, así de simple. Se conforma por varios documentos que se acomodan de manera organizada para que sea atractivo visualmente, dichos documentos se llaman páginas web. Por lo tanto, un sitio web es la compilación organizada y estructurada de un determinado número de páginas web.
Las páginas web de las que se conforma el sitio deben estar desarrolladas bajo un código llamado HTML y estar alojadas a un dominio que, en palabras simples, será el lugar que hará que el sitio web pueda visualizarse en cualquier tipo de navegador web
Una página web, o página electrónica, página digital, o ciberpágina12 es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador web. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto. Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.
Las páginas web pueden estar almacenadas en un equipo local o en un servidor web remoto. El servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en una intranet corporativa, o puede publicar las páginas en la World Wide Web. El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP).
Empezando por su definición, consideramos una página web a un documento disponible en Internet, o World Wide Web (www), codificado según sus estándares y con un lenguaje espcífico conocido como HTML. Es algo a lo que estamos acostumbrados a acceder si leemos este artículo pero no todos conocen realmente su funcionamiento.
A estos sitios se puede llegar a través de los navegadores de Internet, que reciben la información del documento interpretando su código y entregando al usuario la información de manera visual.
Estos suelen ofrecer textos, imágenes y enlaces a otros sitios, así como animaciones, sonidos u otros.
Una página web necesita un lugar donde alojarse para que cuando el usuario solicite la información desde su navegador, la información que esta contiene se cargue y aparezca en el ordenador. Es por ello que los sitios web se encuentran en un servidor web o host, que podría definirse a grandes rasgos como un gran ordenador que entrega el contenido cuando se solicita por la red. Este mismo servicio de almacenamiento se conoce como hosting.
TIPOS DE PAGINAS WED
Básicamente existen dos tipos de páginas web: estáticas y dinámicas. Las estáticas forman parte de épocas anteriores, puesto que son de contenido fijo y no son aptas a actualizaciones constantes. En el caso de las dinámicas, pueden ser construidas en HTML o en otra extensión, como por ejemplo PHP. En este último caso se permite la interacción en tiempo real, apto para algunas páginas web con estas necesidades específicas, como pueden ser los foros.
ELEMENTOS PRINCIPALES DE UNA PAGINA WEB
Los elementos principales en una página web son:
- Texto: a veces redactado por un único autor y otras veces por los usuarios de la misma en el caso de algunas páginas dinámicas con lenguaje como php.
- Imágenes: gif, jpg y png son los tres formantos que suelen utilizarse normalmente.
- Audio y vídeo: suele utilizar las extensiones midi, wav o mp3. También se utilizan las incrustaciones de archivos almacenados en otros sitios, como por ejemplo se hace al añadir vídeos de Youtube.
- Otros: existen además otros elementos que han ido aumentando y evolucionando también con el paso de los años y las nuevas tecnologías. Estos son Adobe Flash, Adobe Shockwave, Java o enlaces (también llamados hipervínculos)
QUE SE NECESITA PARA CREAR UN SITIO WEB
Para crear un sitio web se necesita un editor de html o texto. Algunos editores conocidos para esta función son Microsoft Frontpage y Dreamweaver, parecidos a Microsoft Word en su uso pero con su función específica.
Por otro lado, existen proveedores que permiten crear páginas sencillas, como es el caso de Wordpress con la creación de blogs y también de páginas web en función de la plantilla que se utilice. Este es un recurso gratuito y sencillo para cualquier usuario.
En segundo lugar se necesita un cliente FTP que permita cargar la información a un servidor (en el caso de Wordpress o Blogger no es necesario puesto que es posible alojar la página en sus propios servidores). Los más usados son SmartFTP, aunque es de pago, y los gratuitos Filezilla y OpenSource.
Y por último, para acceder a estas páginas web, se necesitan los navegadores. Entre los más utilizados se encuentra Firefox, Safari o Internet Explorer. Este último viene por defecto instalado en los equipos con sistema operativo Microsoft, al igual que ocurre con Safari y los dispositivos de Apple.
VÍDEO 1
PAGINAS WEB ESTÁTICAS
Una página web estática es un sitio de Internet que muestra el mismo contenido para todos los usuarios, en vez de proporcionar contenido personalizado a la medida de cada usuario, y que no se actualiza a menudo. Las páginas web estáticas, que algunas veces se conocen como páginas planas, contrastan con las páginas web dinámicas que se actualizan frecuentemente y proporcionan información personalizada para usuarios individuales.
PROPOSITO
Las páginas web estáticas a menudo se usan para sitios orientados hacia la prestación de ofertas o información estable a los visitantes (información que probablemente no sea necesario actualizar o alterar durante un largo periodo de tiempo). Por ejemplo, el sitio web de un negocio específico puede tener páginas web estáticas que den detalles de sus servicios, la historia de la compañía y su equipo ejecutivo. Las páginas estáticas también son buenas para mostrar los productos y servicios de un negocio.
INTERACTIVIDAD
Las páginas web estáticas tienen muchas desventajas para los propietarios de sitios que quieran crear una atmósfera o apariencia de interactividad con los visitantes, ya que no existen opciones para crear una atmósfera interactiva en una página estática con contenido personalizado para usuarios individuales. Las páginas web estáticas tampoco pueden acceder a la información del usuario de la forma en la que las páginas dinámicas pueden hacerlo, lo que significa que los propietarios de dichos sitios pierden la oportunidad de saber más acerca de las personas que visiten el sitio.
ACTUALIZACIÓN DE CONTENIDO
Para actualizar una página estática se requiere que el usuario conozca el lenguaje de programación relevante y que sea capaz de hacer cambios usando el código incrustado en la página web. Es un proceso mucho mas laborioso que actualizar una página dinámica, que a través de un diseño más complicado es fácil de usar y puede ser actualizada de forma rutinaria por usuarios sin experiencia ni conocimientos en programación. El propietario de una página web estática necesita conocer la programación de su página para actualizarla, o de lo contrario tendría qué pagar para que un diseñador lo haga.
DESARROLLO
El desarrollo inicial de una página web estática es un proceso más simple y que requiere menos tiempo en comparación con la creación de una página web dinámica, ya que no requiere sofisticadas habilidades de programación. Las páginas web estáticas solamente requieren la comprensión de un lenguaje de programación básico como HTML y pueden ser creadas por diseñadores de sitios de forma relativamente barata. En contraste, las páginas dinámicas usan lenguajes de secuencias de comandos como PHP y ASP que requieren mayor experiencia y conocimientos en programación, además de más tiempo. La relativa simplicidad de la fase de desarrollo ocasiona que las páginas web estáticas sean atractivas para los usuarios que tienen en mente mantener los costos iniciales a un nivel bajo
La principal ventaja de este tipo de páginas es lo económico que resulta crearlas, con un diseño vistoso e incluyendo las imágenes y el texto con el cual queremos informar a los navegantes, se puede crear fácilmente sin necesidad de ningún tipo de programación especial (php, asp, ...) un sitio Web estático.
La gran desventaja de los sitios Web estáticos reside en lo laborioso que resulta su actualización así como la pérdida de potentes herramientas soportadas con bases de datos, como pueden ser la creación de registros históricos de los clientes, pedidos on-line,...
Algunos ejemplos para los cuales resultan útiles la creación de Web estáticas son los siguientes:
CURRICULUM VITAE
Cada día nos encontramos con mas personas que utilizan la Web para presentar su curriculum vitae, es un buena manera de presentarse hacia las empresas a la hora de encontrar trabajo o establecer relaciones comerciales.
WEB QUEST
Son sitios Web desarrollados principalmente por profesores y universidades, con un claro objetivo educativo, proponiendo a un grupo de alumnos un tema en particular (biología, geometría, física, literatura ....) con un serie de cuestiones formuladas acerca del tema elegido, el grupo tiene disponible, en la misma Web, direcciones (links) a otras páginas Web donde pueden indagar e investigar acerca del tema, de tal forma que puedan responder a las preguntas planteadas. El principal objetivo de las Web Quest reside en aprender los contenidos del tema elegido de una manera interactiva.
BLOG O BIRACORA
Es un sitio Web donde se recopilan cronológicamente mensajes de uno o varios autores, sobre una temática en particular siempre conservando el autor la libertad de dejar publicado lo que crea pertinente, también llamado blog o bitácora
WEB INFORMATIVA
Aquellos sitios Web que simplemente ofrecen información acerca de un tema específico (Fiestas en Valencia: Las fallas, Gastronomía andaluza.....), por lo general estos sitios no se actualizan, de tal forma que los contenidos permanecen invariables a lo largo de su vida
PAGINAS WEB DINÁMICAS
Las páginas web dinámicas están desbancando a las tradicionales páginas web estáticas. ¿Aún no sabes cuál es la diferencia entre ambos tipos de páginas web? En este artículo te voy a contar las diferencias entre páginas web dinámicas y estáticas, cuáles son las ventajas de las webs dinámicas y cómo puedes tener una web dinámica fácilmente para tu proyecto.
VENTAJAS DE LAS PAGINAS WEB DINÁMICAS
- Las posibilidades son infinitas. Puedes hacer cualquier cosa que imagines partiendo de una web dinámica. Desde una simple web informativa con los datos de tu empresa o un complejo portal con todo tipo de funciones, un blog, una tienda online, una central de reservas…
- Se posicionan mejor en los buscadores. Como Google a la hora de posicionar una web valora la actualización constante de contenidos, una página web estática siempre tendrá problemas para posicionarse. En cambio una web dinámica es una web viva, la actualización de contenidos puede ser muy frecuente y eso ayuda a posicionarse en los resultados de búsqueda.
- Es mucho más fácil añadir contenidos y modificar cualquier elemento de la web. Lo ideal es tener una web dinámica equipada con un buen gestor de contenidos que te permita añadir páginas, modificar textos o imágenes de una manera eficaz y al alcance de cualquiera. En una página web estática cada pequeño cambio implica modificar todas las páginas de la web y tiene que hacerse mediante ftp y programando, lo cual provoca que el proceso no sea nada ágil y que dependas de profesionales.
- Permiten una mayor interacción con los usuarios, lo cual favorece enormemente la eficacia de la página para atraer clientes.
- Pueden ser mantenidas por personas que no tengan conocimientos de programación.
- Permiten un diseño responsive que se adapta a todo tipo de tamaños de pantalla y dispositivos de navegación: ordenadores, portátiles, tablets, teléfonos móviles, etc.
Por todas estas cosas, las páginas web estáticas son cada vez más una cosa del pasado y han dejado paso a una nueva generación de páginas web interactivas y modernas que han mejorado muchísimo la experiencia de los usuarios en internet
PAGINAS WEB DINÁMICAS VS ESTÁTICAS
Hasta hace no tanto tiempo, todas las páginas web eran estáticas. Eran páginas en las que se mostraba información de manera permanente. Construidas principalmente con HTML. Su aspecto puede ser muy parecido al de una web dinámica, pero no te dejes engañar. No tienes acceso fácil a actualizar el contenido de la web, necesitas ayuda de la persona que la costruyó para hacer la más mínima alteración del texto, etc. Estas páginas son sumamente simples, no tienen posibilidad de añadirles un blog o otro tipo de aplicaciones para añadirles funcionalidades. No son páginas web que puedan ser mantenidas fácilmente por una persona que no tenga conocimientos de programación.
Hoy en día la mayoría de las nuevas páginas web que se crean son dinámicas. Se construyen usando además otros lenguages de programación como PHP que permiten programar en ellas aplicaciones para todo tipo de funciones: blogs, foros, tiendas, etc. La característica principal es que el contenido es fácilmente y frecuentemente modificado.
EXTENSIONES DE UNA PAGINA WEB
Las extensiones de dominios es la parte final del nombre de un dominio y revelan la naturaleza del sitio.
Algunos de los que indican el contenido del sitio web son:
- .com para uso comercial
- .org para asociaciones sin fines de lucro
- .edu para instituciones académicas
- .net para servicios de Internet
- .info para sitios web informativos
- .biz para negocios
Algunas extensiones de Internet usado y reservado para un país o territorio dependiente son:
- .mx para México
- .es para España
- .ar para Argentina
- .tv para Tuvalu. Es muy popular (y por tanto valioso) ya que coincide al significado de la palabra "televisión".
IMAGEN 1
Cuando Internet comenzó hace ya algunos años, funcionaba casi exclusivamente sobre máquinas Unix y todas las páginas eran estáticas. La extensión estándar era html. Cuando la gente empezó a utilizar ordenadores y PCs con el sistema operativo DOS y más tarde Windows con servidores Webincorporados, las cuatro letras html empezaron a ser problemáticas. Al poco tiempo se hizo una normativa que permitía solo tres letras en la extensión. Esto dio paso a dos extensiones estándar: html y htm. Hubo un tiempo en que se podía distinguir si un sitio Web estaba funcionando con Unix o Windows solamente mirando la extensión, pero ahora ya no hay esa distinción.
Las páginas etiquetadas con la extensión shtml, nos revelan que se están utilizando ‘formas’ desde el lado del servidor, o dicho de otra manera, está utilizando SSI (Server Side Includes). Como se ha dicho, las páginas html y htm son estáticas. Se hace la petición a estas páginas y son enviadas tal cual al usuario que las quiere ver. Con SSI, una página puede contener etiquetas indicando que otro fichero debe ser insertado en lugar de la etiqueta de la página existente. Esto quiere decir que la página es cogida del disco duro del servidor y el propio servidor hace todas las sustituciones indicadas. Entonces manda la página final al usuario. Esto hace que sea fácil cambiar ciertas cosas como cabeceras o pies de página en todas las páginas de un dominio.
ASP (Active Server Pages), es una tecnología de Microsoft que permite aun más flexibilidad. Una página Web puede contener código Visual Basic que el servidor ejecuta cuando entrega una página desde su disco de almacenamiento. Este código puede hacer prácticamente de todo – leer bases de datos, ejecutar otros programas, personalizar páginas de usuarios, etc. Se tiene una gran flexibilidad.
Un problema que existe con esto, es que al contener este código que hace todo más dinámico, puede haber fallos de diseño y desarrollo, vulgarmente llamados “bugs”, que pueden ocasionar funcionamientos erróneos.
Ya hace algún tiempo, es bastante común ver extensiones jsp y php también. Jsp (Java Server Pages) es una de las últimas adiciones al conjunto de aplicaciones Java de APIs, y es efectivamente la respuesta de Java a ASP. El código insertado en la página es Java en lugar de Visual Basic. PHP (Personal Home Page) es un lenguaje de scripting que se usa principalmente en Linux. Este lenguaje es uno de los más utilizados y dinámicos que existen actualmente, y merece un artículo aparte que pronto publicaré.
La extensión pl significa que es de PERL, otro lenguaje de scripting. La página contiene solamente el código de este lenguaje, y crea la página por si mismo. El script resultante es también dinámico y puede hacer lo mismo que las otras extensiones asp, php, etc.
La extensión cgi significa que la página también contiene código ejecutado por el servidor, pero el tipo de código puede ser de cualquier cosa
IMAGEN 2
VÍDEO 2
La Historia de Wix
Wix fue fundado en el año 2006 por Avishai Abrahami, Nadav Abrahami y Giora (Gig) Kaplan.
Los hermanos Abrahami y Kaplan, su amigo, desarrollaron la plataforma de Wix como resultado a la frustración generada por las complejidades que presenta la creación de sitios web. Juntos encontraron una manera revolucionaria en la que tanto personas particulares como empresas, pudieran crear y administrar sus propios sitios web.
Once años más tarde Wix sigue ayudando a casi 110 millones de usuarios, entre los cuales muchos no cuentan con habilidades avanzadas para crear una presencia online estética, profesional y funcional. Sin límites de creatividad, sin códigos complicados y con la total libertad para que te expreses y administres tu propio negocio online.
Wix ofrece la única plataforma HTML5 para crear sitios web con la función de arrastrar y soltar; además de cientos de plantillas diseñadas por profesionales, alojamiento de alto nivel, innovadoras aplicaciones y miles de funciones totalmente gratis. En fin, brindamos servicios de primera calidad y nuestro modelo de negocio nos permite proporcionar sitios completamente funcionales para todos de forma gratuita.
La cobertura mundial de Wix, su kit de desarrollo de software abierto y las incomparables capacidades de diseño en su plataforma hacen de Wix un universo único.
Socios, programadores, diseñadores web y otros profesionales online pueden comercializar eficazmente sus aplicaciones y servicios a millones de personas a través de Wix.
Wix siempre está en busca de nuevas maneras de proporcionar a sus usuarios actuales y potenciales, tecnología de punta, el mejor soporte técnico y soluciones únicas para crear y administrar una impresionante presencia online.
IMAGEN 3
QUE ES WIX
Hoy en día hay cada vez más plataformas que prometen ayudarte a crear una página web de manera fácil y gratuita. Wix, una plataforma de origen Israelí, es una de las más conocidas entre ellas. Su eslogan es “Crea tu increíble página web. Es gratis”, una fórmula muy llamativa que atrae a miles de usuarios. Efectivamente, con Wix puedes crear una página web más o menos atractiva, de manera fácil y “gratis”.
POR QUE ES TAN POPULAR
Wix es increíblemente popular, tiene más de 60 millones de usuarios y presumen de que cada día 45.000 usuarios nuevos se suman a utilizarla. ¿A qué se debe?
- Es muy fácil de usar. Hasta un niño puede construir una web en Wix en poco tiempo.
- Tiene plantillas muy vistosas, que prometen un diseño muy atractivo.
- De primeras, hacer tu web es gratis si no te importa que esté llena de publicidad y que tu dominio acabe en .wix.com
- Ofrecen alojamiento gratuito básico.
LA VERDAD DE WIX
La verdad es que Wix, como muchas otras plataformas de este tipo, al final acaban dando muchos dolores de cabeza. Cada semana recibo algún email en mi bandeja de entrada de una persona que ha hecho una página web en Wix y está profundamente decepcionada. ¿Qué es lo que pasa?
- Los problemas empiezan cuando ya has montado tu web y pasa el tiempo y te das cuenta de que nadie la visita.
- Tu web no aparece en las búsquedas de Google.
- Algunas personas te dicen que no pueden abrirla…
- Decides que quieres usar tu propio dominio y Wix te empieza a cobrar 4€ al mes por un servicio que cuesta normalmente unos 12€/anuales.
- Tu web no se ve bien en dispositivos móviles.
- Tu web tarda una eternidad en cargarse porque estás compartiendo un alojamiento gratuito de mala calidad con muchísimas otras personas.
- Si cambias de plantilla, pierdes todo el contenido.
- No puedes acceder al código fuente de tu web para usar CSS o HTML para poder personalizar tu plantilla.
- De repente te pasas de la capacidad del alojamiento gratuito en Wix y tienes que empezar a pagar desde 8€ al mes para poder añadir más información a tu página.
Lo que parecía gratis, resulta no serlo. Al final si quieres una web mínimamente profesional, tendrás que pagar más de lo que cuesta mantener una web realmente profesional pero con la pequeña diferencia de que tu web de Wix, nunca será tuya. Tu web siempre pertenecerá a Wix, nunca podrás llevártela a otro servidor mejor o más barato…Por que simplemente, por más que pagues como si la web fuera tuya, no lo es. Y si Wix decide un buen día cerrar porque ya no le resulta rentable el negocio o porque sus usuarios empiezan a darse cuenta de que no es un buen gestor de contenidos…perderás tu web en un abrir y cerrar de ojos. Por que tu web está alquilada y no te pertenece.
Wix no permite optimizar las webs para el posicionamiento en buscadores. Por más que lo anuncien en su plataforma, a Google no le gusta Wix y, si tienes una web en esta plataforma, ya lo habrás notado. El tipo de lenguajes de programación que utiliza, son de los más penalizados por los motores de búsqueda. Lo que hace que te resulte fácil diseñar tu web, será lo que haga que sea imposible posicionarla.
Aunque presumen de utilizar diseño responsive, adaptado a dispositivos móviles, la verdad es que la velocidad de carga es tan lenta que desde un dispositivo móvil es muy difícil que tu web se cargue y la experiencia de los navegantes será una auténtica pesadilla. El diseño responsive no se puede automatizar, hay que tenerlo en cuenta a la hora de hacer el diseño.
Wix tampoco te permite utilizar Google Analytics en su versión gratuita, lo cual te hace perder datos que son esenciales para cualquier campaña de marketing en Internet.
CONCLUSIÓN
Lo cierto es que todas estas plataformas que te invitan a hacerte una web gratis de manera fácil, presentan los mismos problemas…dificultad para posicionarse en buscadores, limitaciones, falta de libertad para moverlas a otro servidor, cuotas altas cuando quieres hacer algo un poco más profesional. Mi consejo es que si tu proyecto va enserio, no pierdas el tiempo con estos gestores de contenido. La plataforma de diseño web profesional más fácil de usar es WordPress y en este artículo te cuento sus ventajas.
VÍDEO 3
LENGUAJE DE MARCADO HTML
Los inicios de HTML se deben a Tim Berners-Lee cuando trabajaba en el CERN (Centro Europeo de Investigación Nuclear). Y es que estando como trabajador del CERN se encontró con la problemática de poder facilitar el acceso a la información con la que trabajaban desde cualquier ordenador del centro o de otras instituciones que trabajaban con ellos.
Buscaban una forma sencilla y estándar de acceder a toda la información. Es en ese momento cuando nace el protocolo HTTP (hypertext transfer protocol) y las páginas HTML.
Además ideó que las páginas estarían unidas entre sí, estarían enlazadas. Era el concepto de hipertexto.
Para la definición del estándar HTML, Tim Berners-Lee se basó en el lenguaje de marcado SGML (Standard General Markup Language). Este lenguaje define reglas de etiquetado y estructura generales. A partir de SGML se han definido lenguajes como HTML, Postscript, RTF,…
Tras tener el desarrollo del sistema de Hipertexto interno, Tim Berners-Lee lo presentó a una convocatoria para desarrollar el sistema Hipertexto en Internet junto con el ingeniero de sistemas Robert Cailliau. La propuesta que presentaron la llamaron World Wide Web (W3).
HTML Tags y Mosaic
En el documento HTML Tags ya podemos ver los conceptos básicos del lenguaje HTML ya que en él se define como insertar texto, títulos, enlaces y listas. Y algún elemento que acabó perdiéndose con el paso del tiempo como la identificación de índice del documento.
Junto con HTML Tags aparece el primer navegador para poder visualizar las páginas que se llamó “WorldWideWeb”.
Posteriormente se crearían otros navegadores web (Samba, Erwise, y Viola) además del que puede ser considerado como el primer navegador web global que fue Mosaic, desarrollado por NCSA.
El grupo de gente que creo Mosaic (Mark Andreessen entre ellos) abandonó NCSA para crear posteriormente Netscape.
HTML 2.0
El proyecto World Wide Web se empieza a extender por el mundo, siendo varios proveedores de servicios (entre ellos AOL) los que empiezan a dar acceso a la red.
HTML 2.0 es la primera versión que podríamos considerar como estándar, o al menos definida por un organismo oficial.
Creación de la W3C y HTML 3.0
Tras diferentes conversaciones entre Tim Berners-Lee y el MIT, el 1 de octubre de 1994 es creado el consorcio W3. Más conocido como W3C (World Wide Web Consortium) con la idea de definir estándares para Internet.
Es HTML 3.2 la versión que pasa a ser la recomendación. El borrador de HTML 3.0 es interesante ya que se empieza a hablar de elementos como tablas, textos alrededor de las imágenes, y un elemento llamado MATH que permite crear fórmulas dentro del documento HTML.
Una de las cosas que más buscaba HTML 3.0 es que fuese compatible hacia atrás con todo lo que se había creado hasta entonces. Quizás un trabajo demasiado teórico.
HTML 3.2
En HTML 3.2 se pasaban a utilizar elementos que habían nacido fuera de la especificación y que habían sido definidos por los fabricantes como Netscape e Internet Explorer.
QUE SON LOS LENGUAJES DE MARCAS O DE MARCADO
En el año 1989, el físico nuclear Tim Berners-Lee del CERN (Centro europeo para la investigación nuclear) trabajaba en un sistema que permitiera acceder a archivos en línea sobre el protocolo de comunicaciones TCP/IP. En este año existían dos métodos para enlazar documentos electrónicos entre sí. Por una parte los enlaces o hipervínculos y por otra parte un lenguaje denominado SGML (Standard Generalize Markup Language, "Lenguaje de marcas generalizado"), que consiste en un sistema para la organización y etiquetado de documentos. La ISO normalizó el lenguaje en el año 1986. Sirve para especificar las reglas de etiquetado y no impone ningún conjunto de etiquetas especial, teniendo en cuenta estos métodos Tim Berners-Lee a principios de 1990 definió el lenguaje HTML (Hypertext Markup Language, “Lenguaje de marcas hipertextuales”) como un subconjunto de SGML y creó algo más el World Wide Web (también conocido como la Web, es un sistema de documentos de hipertexto y/o hipermedios enlazados entre si y accesibles desde interne). En 1991 creó el primer navegador de HTML que funcionaba en modo texto y para el sistema UNIX.
LENGUAJE DE MARCAS
Un Lenguaje de Marcas (Markup Language) es un modo de codificar (redactar) un documento donde, junto con el texto, se incorporan etiquetas (marcas o anotaciones) con información adicional relativa a la estructura del texto o su formato de presentación. Los Lenguajes de Marcas permiten hacer explícita la estructura de un documento, su contenido semántico o cualquier otra información lingüística o extralingüística que se quiera hacer patente.
TIPOS DE LENGUAJE DE MARCAS
Los Lenguajes de Marcas se pueden clasificar como sigue:
- Lenguajes de presentación: Define el formato (apariencia) del texto. Éstos suelen ocultar las etiquetas y mostrar al usuario solamente el texto con su formato.
- Lenguajes de procedimientos: Orientado también a la presentación pero, además, el programa que representa el documento debe interpretar las etiquetas para realizar acciones en función de ellas.
- Lenguajes descriptivos o semánticos: Describen las diferentes partes en las que se estructura el documento, es decir, definen su contenido, pero sin especificar cómo deben representarse.
VÍDEO 4
HTML HyperText Markup Language
HTML es un lenguaje que describe un documento hipertextual.
HTML no es un lenguaje de programación, es un lenguaje descriptivo compuesto por etiquetas, un texto que marca el inicio y final de un elemento html. Las etiquetas son interpretadas por el navegador y el resultado es lo que vemos en la pantalla de nuestros dispositivos.
IMAGEN 5
A continuación verás las etiquetas básicas que debe tener todo documento html:
html
La etiqueta html es la primera etiqueta que aparece en un documento, precisamente marca el inicio y fin de todo el documento.
head
En la etiqueta head describimos las cosas que son comunes al documento como el título, hojas de estilos y scripts.
body
Dentro de esta etiqueta escribimos el contenido del documento como tal.
Etiquetas del encabezado
Estas etiquetas deben ir dentro de la etiqueta head. Describen metadatos y recursos comunes a todo el documento.
title
Dentro de la etiqueta title debemos escribir el título del documento, este será visible en la pestaña del navegador.
meta
La etiqueta meta se usa para describir información del documento, como el autor, una breve descripción y algunas palabras clave. Esta información es importante para que los buscadores y las redes sociales puedan saber de qué se trata la página.
link
Con la etiqueta link podemos hacer referencia a un recurso externo, su uso más común es asociar una o más hojas de estilo a un documento HTML.
script
La etiqueta script se usa para hacer referencia a archivos externos de código o puede también incluir directamente código dentro de ella. De esta forma asociamos código JavaScript a los documentos HTML.
Etiquetas estructurales
Estas etiquetas no tienen una visualización en particular, pero nos son útiles para estructurar el documento.
div
El objetivo de la etiqueta div es agrupar elementos diversos dentro de un único bloque, esto es útil por ejemplo al momento de aplicar estilos css, pues podemos aplicar un estilo a todos los elementos que estén dentro del mismo bloque div.
span
Con la etiqueta span también es posible agrupar elementos, pero no dentro de un bloque, sino en forma lineal.
header
La etiqueta header nos permite definir el encabezado del documento, generalmente allí encontramos el logo y menú de un sitio web.
footer
Con la etiqueta footer definimos el pie del documento, por lo general tenemos aquí los enlaces a información corporativa, preguntas frecuentes y datos de contacto.
Etiquetas de interfaz de usuario
Estas etiquetas presentan controles visuales en el documento, las usamos para recibir información del usuario, por ejemplo en formularios.
select
La etiqueta select presenta una lista de opciones desplegable. Puedes hacer clic sobre las flechas en la parte de visualización para que pruebes su funcionamiento.
button
Como su nombre lo indica esta etiqueta presenta un botón.
checkbox
Esta etiqueta presenta un botón de tipo check. Este tipo de botones se suele usar en grupos para mostrar múltiples opciones.
radio button
Esta etiqueta presenta un botón de tipo radio. Este tipo de botones se suele usar en grupos para elegir una única opción entre varias.
input
Esta etiqueta se usa para presentar al usuario un campo de entrada de datos que pueden ser de tipo texto, numérico, fecha u otros. Puedes escribir dentro del campo para que compruebes su funcionamiento.
textarea
Esta etiqueta presenta un área que permite la entrada de una mayor cantidad de texto. Puedes escribir un párrafo dentro del campo para que compruebes su funcionamiento.
Etiquetas multimedia
Estas etiquetas nos permiten incluir elementos diferentes a texto. Algunas aparecen a partir de la versión 5 del estándar HTML y hacen posible la reproducción de audio, video y elementos 2D y 3D sin utilizar plugins adicionales.
img
A través de la etiqueta img podemos incluir imágenes estáticas o animadas en nuestro documento html.
audio
Con la etiqueta audio podemos incluir archivos de audio en el documento y reproducirlos directamente a través del browser o navegador.
video
Con la etiqueta video podemos incluir videos en el documento, con la posibilidad de mostrar controles de reproducción, como pausa, avance y ver en pantalla completa.
canvas
La etiqueta canvas nos permite incluir gráficos personalizados en 2D o 3D, es un área del documento en donde podemos dibujar a través de código.
Etiquetas de formato
Estas etiquetas representan elementos de texto con diferentes características.
Títulos
Los títulos van desde la mayor importancia (1) hasta la menor (6), con etiquetas desde h1 hasta h6.
Párrafo
Los párrafos se enmarcan entre la etiqueta p, agrupando un texto que tiene sentido completo.
fuente
VÍDEO 5
Que son las etiquetas
Una etiqueta (términos a veces reemplazados por el anglicismo tag) es una marca con clase que delimita una región en los lenguajes basados en XML. También puede referirse a un conjunto de juegos informáticos interactivos que se añade a un elemento de los datos para identificarlo (Oxford English Dictionary). Esto ocurre, por ejemplo, en los archivos MP3 que guardan información sobre una canción así como sobre el artista que la ha cantado o compuesto.
Como ocurre en otros casos, a menudo se emplea la palabra inglesa (tag) a pesar de que «etiqueta» o «baliza» son perfectamente adecuadas. Con la llegada de la World Wide Web ha habido una invasión de tags. La Web se basa en el HTML, o «lenguaje de marcado de hipertexto», que está basado en el uso de etiquetas. Las etiquetas (entre otras muchas cosas) le dicen al programa visualizador de páginas web (o navegador) en qué juego de caracteres está la página, de qué tipo es cada uno de los fragmentos de texto que contiene (por ejemplo, encabezamiento, texto normal, etc.), si están alineados a un lado o centrados, en qué tipo de letra está el texto (cursiva, negrita, etc.), si hay tablas, de qué anchura son etc. Dicho de otro modo: las balizas dan al navegador las instrucciones necesarias para que presente la página en pantalla.
EJEMPLOS
Si se observa el código de una página web (sencillamente escogiendo en el menú del navegador «Ver -> Código fuente»), se encontrará con los paréntesis angulares < > (los símbolos "menor que" y "mayor que", que enmarcan habitualmente la etiqueta de apertura o inicio, y </ >, que acotan la etiqueta de cierre o final). Lo que hay entre las etiquetas suele ser el texto que se puede ver directamente en pantalla. Las etiquetas simplemente dan las órdenes que indican:
- Cómo se van a visualizar los elementos destinados a ser visibles en pantalla y cómo se visualizarán
- Cómo actuarán en el mismo documento los elementos no destinados a ser visibles en pantalla, así como la manera en que actuarán en relación con otros documentos
Véase el siguiente ejemplo:
<etiqueta1> <etiqueta2 atributo1="hola" atributo2="mundo"> </etiqueta2> <etiqueta3 atributo1="domin"/> </etiqueta1>
En este ejemplo hay tres etiquetas (etiqueta1, etiqueta2 y etiqueta3). La etiqueta1 delimita, o contiene, las etiquetas etiqueta2 y etiqueta3. Las etiquetas también pueden tener atributos, que aportan información específica; por ejemplo, los atributos atributo1 y atributo2 aportan información a la etiqueta2, al igual que hace el atributo1 a la etiqueta3.
Ejemplos de balizas html:
<html><head><title></title></head><body bgcolor=red><h1><font color=green><font face=verdana></font> </h1> <h2><a href=destino de imagen></h2> <p> <img src="fuente de imagen"></html></a> </p></body>
Ejemplos de balizas html destinadas a interactuar con otros documentos sin ser necesariamente visibles en pantalla son, entre otros ejemplos posibles, las llamadas «metabalizas» (o metatags) que en lenguaje HTML pueden incluir palabras clave para que la página web en las que están incluidas sea referenciada con mayor rapidez y pertinencia por los motores de búsqueda.
ACTIVIDAD HTML
No hay comentarios:
Publicar un comentario