PÁGINAS WEB Y LENGUAJE DE MARCADO HTML.
- SITIO WEB:
 |
| imagen 1: sitios web. |
El 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 (hosting).
 |
| imagen 2: mapa conceptual sitios web. |
- PÁGINA WEB:
 |
| imagen 3: página web. |
Una página web, o página electrónica, página digital, o ciberpágina 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).
 |
| imagen 4: mapa mental páginas web. |
- ¿QUE ES UNA PÁGINA WEB ESTÁTICA?
 |
| imagen 5: página 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. 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.
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.
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.
FUENTE: https://techlandia.com/pagina-web-estatica-info_314661/
-¿QUE ES UNA PÁGINA 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.
Las extenciones de una pagina de dominios es la parte final 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 informáticos
- .biz para negocios
Algunas extensiones de Internet usado y reservado para un país o un territorio dependiente son:
- .mx para México
- .es para España
-.ar para Argentina
Se debe escoger la extensión que mas le convenga.
- WIX
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. 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.
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
HISTORIA:
HISTORIA:
Wix fue fundado en el 2006 por los israelíes Avishai
Abrahami, Navad Abrahami y Giora Kaplan. La compañía, con sede en Tel Aviv, con
oficinas en San Francisco, Nueva York, Dnipropetrovsk, y Vilnius, está
respaldada por los inversores de "Capital".
La compañía entró en una fase beta abierta en 2007 usando una plataforma basada en Adobe Flash.
En abril de 2010 Wix tenía 3.5 millones de usuarios y recaudado $10 millones en financiación Serie C proporcionado por Benchmark Capital y los inversores existentes Besemer Venture Partners y Mangrove Capital Partners. En marzo de 2011, Wix tenía 8.5 millones de usuarios y recaudado $40 millones en financiación en Serie D, con lo que su financiación total a esa fecha ascendió a $61 millones.8 En abril de 2014, Wix anunció su adquisición de Appixia, una startup israelí para la creación de aplicaciones nativas de comercio móvil (M-Commerce). En octubre de 2014, Wix anunció su adquisición de OpenRest, un desarrollador de sistemas de pedidos en línea para restaurantes.
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.
La historia completa de HTML es tan interesante como larga,
por lo que a continuación se muestra su historia resumida a partir de la
información que se puede encontrar en la Wikipedia.
La compañía entró en una fase beta abierta en 2007 usando una plataforma basada en Adobe Flash.
En abril de 2010 Wix tenía 3.5 millones de usuarios y recaudado $10 millones en financiación Serie C proporcionado por Benchmark Capital y los inversores existentes Besemer Venture Partners y Mangrove Capital Partners. En marzo de 2011, Wix tenía 8.5 millones de usuarios y recaudado $40 millones en financiación en Serie D, con lo que su financiación total a esa fecha ascendió a $61 millones.8 En abril de 2014, Wix anunció su adquisición de Appixia, una startup israelí para la creación de aplicaciones nativas de comercio móvil (M-Commerce). En octubre de 2014, Wix anunció su adquisición de OpenRest, un desarrollador de sistemas de pedidos en línea para restaurantes.
 |
| imagen 10: lenguaje de marcado HTML. |
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.
Como se puede observar, hemos añadido dos marcas de negrita,
una de inicio y una de final. Podemos identificar claramente las marcas porque
vienen entre signos de mayor y menor. ¡Ésta es la manera que tenemos de no
confundirlo con el contenido! Por otro lado, vemos que las marcas son
ligeramente diferente, ya que una es la de inicio (<negrita>) y otra la
de final (</negrita>, nótese la barra), de manera que el contenido que
esté resaltado sea sólo la palabra muy y nada más.
Existen otro tipo de marcas que no requerirían una marca de
final. Así, por ejemplo, pongamos el caso en el que tengamos un párrafo y
cursiva (en estos casos sí necesitamos indicar el inicio y el final) y un salto
de línea (aquí, por contra, no hace falta indicar el final, ya que el salto de
línea empieza... y ya está). Por ejemplo:
<párrafo>
Hoy es un día <negrita>muy</soleado>
soleado.
<salto/>
Pero mañana <cursiva>por
desgracia</cursiva> lloverá.
</párrafo>
Nótese, que para indicar que salto no tiene marca de
finalización, hemos puesto la barra al final de su marca de inicio. Bien, pues
a grandes rasgos esto es lo que es un lenguaje de marcado: tenemos marcas con
un significado específico que permiten añadir información, formato, etc. a un
contenido. Las marcas vienen entre unos caracteres especiales (los signos de
mayor y menor) para no ser confundidos con el contenido y pueden existir marcas
de inicio y final dependiendo del tipo de marca.
FUENTE: http://formacion.intef.es/pluginfile.php/52814/mod_imscp/content/5/qu_es_un_lenguaje_de_marcas.html
video 7: Tutorial básico HTML
-HISTORIA:
 |
| Imagen 11: HTML. |
El origen de HTML se remonta a 1980, cuando el
físico Tim Berners-Lee, trabajador del CERN (Organización
Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para
compartir documentos.
Los sistemas de "hipertexto" habían
sido desarrollados años antes. En el ámbito de la informática, el "hipertexto" permitía
que los usuarios accedieran a la información relacionada con los documentos
electrónicos que estaban visualizando. De cierta manera, los primitivos
sistemas de "hipertexto" podrían asimilarse a los
enlaces de las páginas web actuales.
Tras finalizar el desarrollo de su sistema de "hipertexto",
Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un
sistema de "hipertexto" para Internet. Después de
unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron
la propuesta ganadora llamada WorldWideWeb (W3).
El primer documento formal con la descripción de HTML se
publicó en 1991 bajo el nombre HTML Tags(Etiquetas HTML) y
todavía hoy puede ser consultado online a modo de reliquia informática.
La primera propuesta oficial para convertir HTML en un
estándar se realizó en 1993 por parte del organismo IETF (Internet
Engineering Task Force). Aunque se consiguieron avances significativos (en
esta época se definieron las etiquetas para imágenes, tablas y formularios)
ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron
convertirse en estándar oficial.
En 1995, el organismo IETF organiza un grupo de trabajo de
HTML y consigue publicar, el 22 de septiembre de ese mismo año, el estándar
HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.
A partir de 1996, los estándares de HTML los publica otro
organismo de estandarización llamado W3C(World Wide Web Consortium).
La versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera
recomendación de HTML publicada por el W3C. Esta revisión incorpora 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.0 se publicó el 24 de Abril de 1998 (siendo una
versión corregida de la publicación original del 18 de Diciembre de 1997) y
supone un gran salto desde las versiones anteriores. Entre sus novedades más
destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir
pequeños programas o scripts en las páginas web, mejora de la
accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los
formularios.
La última especificación oficial de HTML se publicó el 24 de
diciembre de 1999 y se denomina HTML 4.01. Se trata de una revisión y
actualización de la versión HTML 4.0, por lo que no incluye novedades
significativas.
FUENTE: https://uniwebsidad.com/libros/xhtml/capitulo-1/breve-historia-de-html
- QUE SON LAS ETIQUETAS
Una etiqueta 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 . 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.
LAS ETIQUETAS MÁS RELEVANTES:
- QUE SON LAS ETIQUETAS
Una etiqueta 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 . 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.
LAS ETIQUETAS MÁS RELEVANTES:
<title>: para definir el titulo de una página. Importantisimo para el SEO.
<link> y <style>: ambas van dentro del <head>, y sirven para aplicar estilos CSS a nuestro documento. Con <link> vinculamos de forma externa un archivo.css, y con <style> podemos escribir directamente código CSS dentro del head.
<h1>, <h2>, <h3>….<h6>: encabezados, numerados del 1 al 6 por orden de RELEVANCIA. El uso de estos encabezados es determinante para el SEO, porque es la mejor forma que tienen Google de entender la estructura de nuestro contenido y poder saber qué es lo relevante.
Un pequeño tip: no se te ocurra, meter dos o más encabezados <h1>. Lo mejor, es poner sólo uno y que contenta tu keyword, y luego estructurar el contenido de forma coherente con <h2> y <h3>, incluyendo en ello la keyword y variantes, no siempre la misma exactamente.
<table>, <tr> y <td>: son las tablas, las filas y las celdas. Están un poco obsoletas aunque a veces me han sacado de un apuro.
<div>: es un elemento “contendedor” de otras cosas. Realmente es lo que más se usa. Sabiendo manejar un <div style=”loquenecesites”>contenido</div> puedes hacer casi todo. Podrás ver un ejemplo práctico al final del post.
<a>: para añadir enlaces. Dentro de ella tendremos dos atributos importantes, que son: href=”indica_la_URL_o_RUTA” y target=”self o _blank”, según quieras que el enlace se abra en la misma página o en una pestaña nueva.
<img> es la etiqueta con la que se insertan las imágenes. Este es uno de los pocos casos que no necesita etiqueta de cierre, sino que vale con: <img src=”rutadelaimagen” alt=”textoalternativo” />, sin poner </img>
<li>, <ol>, <ul>: son las etiquetas que controlan las listas ordenadas y desordenadas. Ejemplo:
Estos circulos son de listas desordenadas, usando la etiqueta <ul>
Este número sale porque utilizo una lista ordenada, con <ol>
Cada elemento o item de una u otra lista, se controla medianta <li>
<b>: convierte el texto a negrita. Tambien os podéis encontrar con el antiguo <strong> que hace lo mismo.
<i>: lo mismo pero para aplicar cursiva al formato de un texto. Ejemplos: esto irá en <b>negrita</b> y este otro texto en <i>cursiva</i>
<p>: con esta etiqueta determinamos un texto de párrafo. Se le aplican estilos como a todas, el dato relevante de esta etiqueta sería explicar el hecho de que añade un salto de línea y otro más al cerrarla con </p>, como si diéramos dos veces al “intro”, para que me entiendas.
<br />: esta otra etiqueta sin embargo, hace un salto de línea simple. Es decir, lo que venga después de esto irá justo en la linea siguiente, pero sin dar otro espacio más. Mira la diferencia:
“Escribo un texto normal y la siguiente linea la escribo después del cierre de un </p>
Esta es la siguiente linea cerrando con esa etiqueta <p>.”
FUENTE : https://www.haciaelautoempleo.com/etiquetas-html-basicas/
FUENTE : https://www.haciaelautoempleo.com/etiquetas-html-basicas/
video 8: Etiquetas Básicas
 |
| Actividad guía N°2 "mi primera página web" |
 |
| Actividad Guia N°3 "atributos HTML" |
No hay comentarios:
Publicar un comentario