Periodo I

Temática:Paginas Web Y Lenguaje De Marcado html

PÁGINAS WEB

¿Qué es un sitio web?

Un sitio web, portal o cibersitio es una colección de páginas web relacionadas y comunes a un dominio de Internet o subdominio en la World Wide Web dentro de Internet.1​2​

Todos los sitios web públicamente accesibles constituyen una gigantesca World Wide Web de información; y un gigantesco entramado de recursos de alcance mundial.A las páginas de un sitio web se accede frecuentemente a través de un URL raíz común llamado portada, que normalmente reside en el mismo servidor físico. Los URL organizan las páginas en una jerarquía, aunque los hiperenlaces entre ellas controlan más particularmente cómo el lector percibe la estructura general y cómo el tráfico web fluye entre las diferentes partes de los sitios.

Algunos sitios web requieren una suscripción para acceder a algunos o todos sus contenidos. Ejemplos de sitios con suscripción incluyen algunos sitios de noticias, sitios de juegos, foros, servicios de correo electrónico basados en web, sitios que proporcionan datos de bolsa de valores e información económica en tiempo real, etc.Fuente

Imagen 1: Imagen representativa

Fuente: Web

¿Que es una pagina web?

Una página web, o página electrónica, página digital, o ciberpágina1​2​ 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). Fuente

Imagen 2: Formatos

Fuente:Web

¿Que es una pagina web estática?

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.

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.Fuente

Imagen 3: Web Estatica

Fuente:Web

¿Que es una pagina web dinámica?

Los sitios web dinámicos son aquellos que permiten crear aplicaciones dentro de la propia web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, noticiarios, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada ... donde el administrador dispone la opción de gestionar dichos apartados, agregando, editando o eliminando contenidos.

La gran ventaja de los sitio web dinámicos es la versatilidad, apunta a la personalización de la información mostrada. Permite la toma de decisiones y muestra selectiva de información en función de criterios deseados.

Es útil para mostrar una imagen de empresa más sólida y profesional ya que permite guardar información en la computadora del navegante y mostrar en forma personalizada la página web de la empresa así como la información adecuada al tipo de navegante.Fuente

Vídeo 1: Diferencia entre páginas web estáticas y dinámicas

Fuente

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".

Se debe escoger la extensión de dominio que más le convenga.

Usted puede verificar la disponibilidad del nombre de su empresa en las diferentes extensiones con newWweb e iniciar el trámite de registro aquí. Fuente

Imagen 4: Extensiones de una pagina web

Fuente:Web

Wix

Wix.com es una plataforma para el desarrollo web basada en la nube que fue desarrollada y popularizada por la compañía Wix. Permite a los usuarios crear sitios web HTML5 y sitios móviles a través del uso de herramientas de arrastrar y soltar en línea.1​ Los usuarios pueden agregar funcionalidades como plug-ins, e-commerce, formularios de contacto, marketing por correo electrónico, y foros comunitarios con sus sitios web utilizando una variedad de aplicaciones desarrolladas por Wix y de terceros.2​

Wix es construido en un modelo de negocio freemium, ganando sus ingresos a través de actualizaciones premium. Los usuarios deben comprar paquetes premium para conectar sus sitios a sus propios dominios, eliminar los anuncios Wix, añadir capacidades de comercio electrónico o comprar almacenamientos de datos y ancho de banda adicionales. Fuente

Vídeo 2: ¿Que es wix?

Fuente

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. Fuente

Imagen 5: Linea de tiempo de la historia de wix

Fuente:Web

Lenguaje de Marcado Html 

Los lenguajes de marcas se llaman así por la práctica tradicional de marcar los manuscritos con instrucciones de impresión en los márgenes. En la época de la imprenta, esta tarea ha correspondido a los marcadores, que indicaban el tipo de letra, el estilo y el tamaño, así como la corrección de errores, para que otras personas compusieran la tipografía. Esto condujo a la creación de un grupo de marcas estandarizadas.1​ Con la introducción de las computadoras, se trasladó un concepto similar al mundo de la informática. Fuente

Orígenes

El concepto de lenguaje de marcas fue expuesto por primera vez por William W. Tunnicliffe en 1967.2​ La mayor novedad consistía en la separación entre la presentación y la estructura del texto. Tunnicliffe, que prefería referirse a este concepto como codificación genérica (generic coding), dirigiría más tarde el desarrollo de un estándar al que bautizaría como GenCode, destinado a la industria editorial. El editor Stanley Fish también expuso ideas similares a finales de los años 1960. Brian Reid, en su disertación de 1980 en la Carnegie Mellon University, mostró su teoría y una implementación práctica de un lenguaje descriptivo todavía en uso.

Sin embargo, quien es considerado el padre de los lenguajes de marcas es Charles Goldfarb, investigador para la compañía IBM. Goldfarb participó en la creación del lenguaje GML, y posteriormente dirigió el comité que elaboró el estándar SGML, la piedra angular de los lenguajes de marcas. En cualquier caso, y a pesar de las controversias sobre su origen, es comúnmente aceptado que la idea surgió de forma independiente varias veces durante los 70, y que se generalizó en los años 1980. Fuente

Vídeo 3: ¿Que es html?

Fuente

¿Que son lenguajes de marcado o de marca?

Los lenguajes de marcado suelen confundirse con lenguajes de programación. Sin embargo, no son lo mismo, ya que el lenguaje de marcado no tiene funciones aritméticas o variables, como sí poseen los lenguajes de programación. Históricamente, el marcado se usaba y se usa en la industria editorial y de la comunicación, así como entre autores, editores e impresores. Para cada lenguaje de marcado, los desarrolladores de software pueden construir una aplicación para leer los documentos escrito en ese lenguaje. Los navegadores de Web leerán los documentos HTML y Microsoft Office leerá los documentos de Office. Los documentos escritos en XML pueden leerse por medio de aplicaciones personalizadas utilizando diferentes objetos de análisis gramatical o pueden combinarse con el lenguaje de estilo extensible (XLS- Extensible Stylesheet Language) para poder mostrarse en un navegador. Fuente

Imagen 6: Lenguaje de marcas

Fuente:Web

Clases de Lenguaje de Marcado

Marcado de Presentación

El marcado de presentación es aquel que indica el formato del texto. Este tipo de marcado es útil para maquetar la presentación de un documento para su lectura, pero resulta insuficiente para el procesamiento automático de la información. El marcado de presentación resulta más fácil de elaborar, sobre todo para cantidades pequeñas de información. Sin embargo resulta complicado de mantener o modificar, por lo que su uso se ha ido reduciendo en proyectos grandes en favor de otros tipos de marcado más estructurados.

Marcado Descriptivo

El marcado descriptivo o semántico utiliza etiquetas para describir los fragmentos de texto, pero sin especificar cómo deben ser representados, o en que orden. Los lenguajes expresamente diseñados para generar marcado descriptivo son el SGML y el XML.  Fuente

Imagen 7: Clases de lenguaje de marcas

Fuente:Web

¿Que son las abreviaturas con "ML"?

ML es un lenguaje de programación de propósito general de la familia de los lenguajes de programación funcional desarrollado por Robin Milner y otros a finales de los años 1970 en la Universidad de Edimburgo. ML es el acrónimo inglés de metalenguaje dado que fue concebido como el lenguaje para desarrollar tácticas de demostración en el sistema LCF (El lenguaje para el cual ML era metalenguaje es pplambda, una combinación del cálculo de predicados de primer orden y el lambda-cálculo polimórfico sencillamente tipificado).

Frecuentemente se clasifica a ML como un lenguaje funcional impuro dado que permite programar imperativamente con efecto colateral, a diferencia de otros lenguajes de programación funcional, tales como Haskell. Fuente

Imagen 7: Abreviaturas con ML

Fuente:Web

¿Que es un lenguaje de marcas?

Las páginas web ofrecen la posibilidad de tener, además de texto, estructura de la página (columnas), formatos de fuente (colores, subrayados, negritas...), imágenes, enlaces, tablas, listados, etc. Y, sin embargo, todas las páginas web están constituidas por texto plano, o sea, texto sin más. ¿Cómo hacemos para incluir todos estos elementos adicionales y que el navegador sepa diferenciar que es contenido y qué no lo es? La solución es utilizar un lenguaje de marcas. Los lenguajes de marcas no son lenguajes de programación como Scratch (aquí no hay sentencias que ejecutar); son lenguajes que mediante marcas añaden riqueza sintáctica y semántica a un texto. 

Veamos un ejemplo para que quede más claro. Imaginemos que tenemos la siguiente frase:

Hoy es un día muy soleado.

Por ahora cumple la función de que es un texto plano. Nos gustaría añadir características a este texto, pero no al significado, sino a la forma en que se muestra por pantalla, haciendo por ejemplo que muy esté en negrita para fortalecer la sensación de que hace mucho sol. Como sabemos que el resultado de hacerlo ha de ser también texto plano, nos las tendremos que ingeniar de alguna manera para no confundir el contenido con su formato. La solución: añadir marcas. Veamos cómo:

Hoy es un día <negrita>muy</negrita> soleado. Fuente

Vídeo 4: Lenguaje de marcas

Fuente

HTML HyperText Markup Language

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

HTML

Se trata de un formato abierto que surgió a partir de las etiquetas SGML (Standard Generalized Markup Language). Concepto traducido generalmente como “Estándar de Lenguaje de Marcado Generalizado” y que se entiende como un sistema que permite ordenar y etiquetar diversos documentos dentro de una lista. Este lenguaje es el que se utiliza para especificar los nombres de las etiquetas que se utilizarán al ordenar, no existen reglas para dicha organización, por eso se dice que es un sistema de formato abierto. Fuente

Imagen 8: HTML

Fuente:Web

Que son las etiquetas y ejemplos de etiquetas en HTML

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. Fuente

Imagen 9: Etiquetas

Fuente:Web

Ejemplos

-Delimita y engloba toda la página web, que consta de cabecera y cuerpo.

<HEAD> … </HEAD>

-Delimita y engloba la cabecera de una página, que contiene un conjunto de informaciones que no se muestran en la ventana, entre ellas el título de la página, pero que pueden ayudar a los navegadores y a los buscadores para interpretar o a encontrar correctamente la página.

<TITLE> … </TITLE>

-Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la barra del título de la ventana del navegador.

Metadatos

La cabecera admite otras muchas etiquetas (ver apuente 6 y 6.1.)

<BODY> … </BODY>

Formatos Físicos:

-Negrita:        <B>…</B>

-Cursiva:        <I>…</I>

-Subrayado:        <U>…</U>

-Teletipo:        <TT>…</TT>

-Tachado:        <STRIKE>…</STRIKE>

-Grande:        <BIG>…</BIG>

-Pequeña:        <SMALL>…</SMALL>

-Superíndice:        <SUP>…</SUP>

-Subíndice:        <SUB>…</SUB>

Formatos Lógicos:

-Cita:            <CITE>…</CITE>

-Código:        <CODE>…</CODE>

-Definición:        <DFN>…</DFN>

-Énfasis:        <EM>…</EM>

-Grueso:        <STRONG>…</STRONG>

-Palabras clave:    <KEY>…</KEY>

-Ejemplos:        <SAMP>…</SAMP>

-Usuario:        <KBD>…</KBD>

-Variables:        <VAR>…</VAR>

-Ejemplo literal:    <XMP>...</XMP> (ignora las etiquetas HTML de dentro)
Fuente

Vídeo 5: Las etiquetas DIV y SPAN del HTML

Fuente

Actividad: Mi primera pagina web

Fuente: Dayian Danyel Ramirez Acosta

Actividad: Atributos

Fuente: Dayian Danyel Ramirez Acosta