TEMÁTICA. PÁGINAS WEB Y LENGUAJE DE MARCADO HTML
PÁGINAS WEB:
*¿Qué es un sitio web?
Colección de páginas web relacionadas y comunes a un dominio de Internet o subdominio en la World Wide Web dentro de la Internet. Para lograr acceder a un sitio web necesitamos una URL, esto hace que las paginas se organicen por medio de una jerarquía, algunos sitios web requieren de suscripciones, métodos de pago para poder ser visitados.
Imagen 1. Sitio Web
*¿Qué es una pagina web?
Documento o información electrónica que tiene la posibilidad de contener textos, sonidos, imágenes, vídeos, programas, etc, adaptada para la WWW y se puede ser accedido por medio de una navegador web, se puede encontrar generalmente en dos formatos HTML y XHTML, y logra proporcionar acceso a otras páginas web mediante enlaces.
Imagen 2. Pagina Web
Sitio de Internet que muestra el mismo contenido para todos los usuario que la visiten y no se actualiza muy a menudo.
*¿Qué es una pagina web dinámica?
Sitio de Internet que proporciona un contenido diferente y personalizado para cada usuarios individuales y están en actualización continua.
Imagen 3. Tipos de Paginas Web
*Extensiones de una pagina web.
Parte final de la dirección de una pagina web y determina la naturaleza del sitio.
Los que indican contenido del sitio web:
*.com para un uso comercial.
*.org para asociados sin fine de lucro.
*.edu para instituciones académicas.
*.net para servicios de Internet.
*.info para sitios web informativos.
*.biz para negocios.
Los que indican país o territorio independiente algunos son:
*.co para Colombia.
*.mx para México.
*.ar para Argentina.
Imagen 4. Extensiones de una Pagina Web
*WIX:
Pagina web para crear un sitio web de una manera fácil, rápida y sencilla.
*HISTORIA DE WIX:
Fundada en el año 2006 por Avishai y Nadav Abrahami con Giora Kaplan, desarrollan la plataforma WIX en base a la frustración ante la creación de sitios web, y encontraron la manera revolucionaria para que personas particulares como empresas puedan crear y administrar su propio sitio web.
Después de 11 años WIX es la plataforma más grande para la creación de sitios de web teniendo 110 millones de usuarios, entre los cuales no se encuentran muchos con habilidades o experiencia para la creación de este, y ofrece la única plataforma HTML5 capaz de arrastrar y soltar.
Imagen 4. Wix
Tomado de. https://es.wikipedia.org/wiki/Wix.com
Video 1. Pagina Web
Tomado de. https://www.youtube.com/watch?v=fgQu8KV0q8w
LENGUAJE DE MARCADO HTML
*Historia:
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áginasHTML.
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).
Imagen 5. HTML
*¿Qué son los lenguajes de marcado o de marcas?
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.
*¿Qué son las abreviaturas con "ML"?
Casi todas las siglas en la web que tiene un "ML" en ellas, se trata de un "lenguaje de marcado o de marcas." Los lenguajes de marcado son los lenguajes que conforman la web.
Hay muchos lenguajes de marcas diferentes. Este artículo se centra en HTML y XML, pero hay un montón de otros lenguajes de marcado. Tres son los que se deben tener en cuenta si estás haciendo el diseño de una página web o desarrollo: HTML, XML y XHTML.
*¿Qué es un lenguaje de marcas?
Lenguaje de Marca es un tipo de estrategia comunicacional que emplean las marcas haciendo uso de palabras, frases y términos para describir su objeto o hacer referencia a sus productos; el lenguaje de marca se utiliza en la comercialización para ayudar a los consumidores conectar, por ejemplo, a través de palabras, o ideas específicas, a las empresas o productos específicos.
*HTML HyperText Markup Language
HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.1
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.
Imagen 6. Lenguaje de Marcas
Casi todas las siglas en la web que tiene un "ML" en ellas, se trata de un "lenguaje de marcado o de marcas." Los lenguajes de marcado son los lenguajes que conforman la web.
Hay muchos lenguajes de marcas diferentes. Este artículo se centra en HTML y XML, pero hay un montón de otros lenguajes de marcado. Tres son los que se deben tener en cuenta si estás haciendo el diseño de una página web o desarrollo: HTML, XML y XHTML.
Tomado de. https://www.um.es/docencia/barzana/DIVULGACION/INFORMATICA/Que-son-lenguajes-marcado.html
*¿Qué es un lenguaje de marcas?
Lenguaje de Marca es un tipo de estrategia comunicacional que emplean las marcas haciendo uso de palabras, frases y términos para describir su objeto o hacer referencia a sus productos; el lenguaje de marca se utiliza en la comercialización para ayudar a los consumidores conectar, por ejemplo, a través de palabras, o ideas específicas, a las empresas o productos específicos.
Cuando se desarrolla un lenguaje de marca la selección de las palabras y el tono de la marca son los dos componentes más fundamentales. La selección de palabras es el vocabulario que se utiliza en el marketing o publicidad, mientras que el tono se refiere a la actitud de la publicidad. El tono no se limita a la lengua, también se puede incorporar a través de elementos visuales, así como la distribución.
El lenguaje de marca es una parte de la identidad verbal de la marca, que incluye el nombre de la corporación y los productos que vende, así como eslóganes, voz y tono. Otro de los beneficios de desarrollar un lenguaje de marca es la capacidad de una empresa o producto para ser reconocible a través de las fronteras internacionales. Mientras que otros códigos de publicidad pueden ser mal interpretadas, las palabras pueden ser traducidas para garantizar la unidad de la marca.
Tomado de:https://iiemd.com/marca/que-es-lenguaje-de-marca
Video. 2 Lenguaje de Marcas
Imagen 7. ¿Qué es Leguaje de Marca?
 |
Tomado de. https://www.youtube.com/watch?v=3CZCV5-HVRg
*HTML HyperText Markup Language
HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.1
Tomado de. https://es.wikipedia.org/wiki/HTML
*Que son las etiquetas y ejemplos de etiquetas en HTML
Etiquetas HTML para fragmentos de texto
Etiquetas HTML para fragmentos de texto
Imagen 8. Etiquetas HTML
 |
En primer lugar, existe una serie de etiquetas HTML simples para seleccionar un fragmento de texto y dotarlo de un significado especial. Por ejemplo:
Por su parte, la etiqueta
- Estructura de una página web
<HTML> … </HTML>
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>
Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones (texto e imágenes) que se muestran en la página, así como las indicaciones de cómo deben mostrarse.
Admite atributos (ver jac 8 y apuente 5.3 y 14.3).
- Formatos de párrafo
El texto de la página se puede estructurar en encabezamientos de los diferentes apartados de la página, que pueden tener distintos niveles de 1 a 6 (siendo 1 el más importante) y párrafos normales.
<H1> ... </H1> o <H2> ... </H2> (hasta 6)
Párrafos que son encabezamientos (con distintos niveles).
<P>... </P>
Párrafos normales.
<P align="center">... </P>
El atributo align permite alinear el texto del párrafo. Se puede aplicar igual a las etiquetas <H1>, <H2>, etc ..
<BR>
Permite partir un párrafo empezando una línea nueva pero sin dejar espacio.
<HR>
Pone una linea horizontal de separación. (admite atributos) (ver apuente 11.1).
<BLOCKQUOTE>…</BLOCKQUOTE>
Sangra el párrafo.
- Formatos de texto
El formato de caracteres permite cambiar tanto el tipo de fuente como su tamaño y aspecto.Se pueden utilizar varias etiquetas HTML para dar distintos formatos a un grupo de caracteres:
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)
Posibilidad de combinar etiquetas (anidándolas, esto es, una dentro de otra):
<B>…<I>…</I>…</B> (Correcto)
<B>…<I>…</B>…</I> (Incorrecto)
<FONT COLOR="red"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el color (ver jac 8.2)
<FONT SIZE="+1"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el tamaño (ver jac 8.1-segunda parte)
La etiqueta FONT permite combinaciones cualesquiera de los atributos COLOR, SIZE y FACE
Caracteres especiales
Existe una serie de caracteres del ISO-LATIN-1 que no se pueden representar directamente en un documento HTML, puesto que forman parte del propio vocabulario del lenguaje, como por ejemplo los símbolos <, >, &, etc.
Adicionalmente, las vocales acentuadas y algunos signos de puntuación deben ser especificados de forma distinta, puesto que los navegadores pueden no entender el código del carácter utilizado y convertirlo a otro diferente.
Los caracteres especiales más usados son:
á á
é é
í í
ó ó
ú ú
à à
ñ ñ
< <
> >
& &
ç ç
" “
espacio en blanco
(ver apuente 10.1)
- Listas
(ver apuente 7)
<UL> ... </UL>
Lista numerada.
<OL> ... </OL>
Lista no numerada.
<LI> ... </LI>
Elementos de una lista.
- Enlaces
Sirven para acceder desde una página a otra página o a otro recurso disponible (ver apuente 15).
<a href="http://servidor/recurso.html">texto del enlace</a>
Enlace absoluto a una página
<a href="recurso.html">texto del enlace</a>
Enlace relativo a una página
<a name="marcador"> ... </a>
Marcador (enlace interno) dentro de una página
<a href="#marcador">texto del enlace</a>
Enlace a un marcador de la misma página
<a href="recurso.html#marcador">texto del enlace</a>
Enlace a un marcador de otra página (que puede darse con dirección absoluta o relativa)
<a href="recurso.html" target="_blank">texto del enlace</a>
Enlace a otra página (absoluta o relativa, con o sin marcador) que se abra en otra ventana.
- Imágenes
<img src="nombre.gif">
Muestra una imagen, que normalmente es de tipo GIF o JPG
Admite atributos (ver apuente 14).
- Tablas
Permite organizar la información en tablas.
También sirve para maquetar (dar forma general) al aspecto de la página.
Tomado de. https://www.uv.es/cerveron/paginasweb/notashtml.html
Por su parte, la etiqueta
<span> es una versión en linea de la etiqueta <div>, ya que su misión es agrupar contenido de texto, mientras que la misión del <div> es agrupar otras etiquetas HTML que a su vez pueden agrupar otras y otras etiquetas HTML.Ojo, algunas de estas etiquetas, en versiones anteriores de HTML tenían un significado diferente, como por ejemplo la etiqueta <b>, que antiguamente simbolizaba un fragmento de texto en negrita o la etiqueta <i>, que representaba un fragmento de texto en cursiva.- Estructura de una página web
<HTML> … </HTML>
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>
Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones (texto e imágenes) que se muestran en la página, así como las indicaciones de cómo deben mostrarse.
Admite atributos (ver jac 8 y apuente 5.3 y 14.3).
- Formatos de párrafo
El texto de la página se puede estructurar en encabezamientos de los diferentes apartados de la página, que pueden tener distintos niveles de 1 a 6 (siendo 1 el más importante) y párrafos normales.
<H1> ... </H1> o <H2> ... </H2> (hasta 6)
Párrafos que son encabezamientos (con distintos niveles).
<P>... </P>
Párrafos normales.
<P align="center">... </P>
El atributo align permite alinear el texto del párrafo. Se puede aplicar igual a las etiquetas <H1>, <H2>, etc ..
<BR>
Permite partir un párrafo empezando una línea nueva pero sin dejar espacio.
<HR>
Pone una linea horizontal de separación. (admite atributos) (ver apuente 11.1).
<BLOCKQUOTE>…</BLOCKQUOTE>
Sangra el párrafo.
- Formatos de texto
El formato de caracteres permite cambiar tanto el tipo de fuente como su tamaño y aspecto.Se pueden utilizar varias etiquetas HTML para dar distintos formatos a un grupo de caracteres:
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)
Posibilidad de combinar etiquetas (anidándolas, esto es, una dentro de otra):
<B>…<I>…</I>…</B> (Correcto)
<B>…<I>…</B>…</I> (Incorrecto)
<FONT COLOR="red"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el color (ver jac 8.2)
<FONT SIZE="+1"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el tamaño (ver jac 8.1-segunda parte)
La etiqueta FONT permite combinaciones cualesquiera de los atributos COLOR, SIZE y FACE
Caracteres especiales
Existe una serie de caracteres del ISO-LATIN-1 que no se pueden representar directamente en un documento HTML, puesto que forman parte del propio vocabulario del lenguaje, como por ejemplo los símbolos <, >, &, etc.
Adicionalmente, las vocales acentuadas y algunos signos de puntuación deben ser especificados de forma distinta, puesto que los navegadores pueden no entender el código del carácter utilizado y convertirlo a otro diferente.
Los caracteres especiales más usados son:
á á
é é
í í
ó ó
ú ú
à à
ñ ñ
< <
> >
& &
ç ç
" “
espacio en blanco
(ver apuente 10.1)
- Listas
(ver apuente 7)
<UL> ... </UL>
Lista numerada.
<OL> ... </OL>
Lista no numerada.
<LI> ... </LI>
Elementos de una lista.
- Enlaces
Sirven para acceder desde una página a otra página o a otro recurso disponible (ver apuente 15).
<a href="http://servidor/recurso.html">texto del enlace</a>
Enlace absoluto a una página
<a href="recurso.html">texto del enlace</a>
Enlace relativo a una página
<a name="marcador"> ... </a>
Marcador (enlace interno) dentro de una página
<a href="#marcador">texto del enlace</a>
Enlace a un marcador de la misma página
<a href="recurso.html#marcador">texto del enlace</a>
Enlace a un marcador de otra página (que puede darse con dirección absoluta o relativa)
<a href="recurso.html" target="_blank">texto del enlace</a>
Enlace a otra página (absoluta o relativa, con o sin marcador) que se abra en otra ventana.
- Imágenes
<img src="nombre.gif">
Muestra una imagen, que normalmente es de tipo GIF o JPG
Admite atributos (ver apuente 14).
- Tablas
Permite organizar la información en tablas.
También sirve para maquetar (dar forma general) al aspecto de la página.
Tomado de. https://www.uv.es/cerveron/paginasweb/notashtml.html
Actividad 1. Mi Primer Pagina HTML
Tomado de. Juan Villalobos
Actividad 2. Atributos
Tomado de: Juan Villalobos
No hay comentarios.:
Publicar un comentario