-->

Menú principal

lunes, 17 de abril de 2017

TIC 2º BCH - Tema 8.- Diseño y edición de páginas web

Actualizado el 5 de mayo de 2020

Tema 8.- DISEÑO Y EDICIÓN DE PÁGINAS WEB


1.- Páginas web
   1.1.- Clasificación
   1.2.- Funcionamiento
2.- Criterios de diseño
   2.1.- Prediseño y planificación
   2.2.- Estructura de una web
   2.3.- Elementos de diseño
   2.4.- Estándares de accesibilidad de la información
3.- Herramientas de publicación: gestores de contenido
   3.1.- ¿Qué es un CMS?
   3.2.- Creación de contenido
   3.3.- Gestión de contenido
   3.4.- Publicación de contenidos
   3.5.- Presentación de contenidos
   3.6.- CMS comerciales y de código abierto
4.- El lenguaje HTML
   4.1..- ¿Qué es HTML?
   4.2.- ¿Cómo se usa HTML? 
   4.3.- Utilización de las etiquetas
   4.4.- Creación de documentos HTML

5.- El Lenguaje JavaScript
6.- Editores de páginas web
7.- Alojamiento de sitios web
   7.1.- Alojamiento de sitios web
   7.2.- Transferencia de ficheros
8.-Prácticas y ejercicios


 

 

1.- Páginas web

Una Página Web es un documento de tipo electrónico, que contiene información digital, la cual puede venir dada por datos visuales y/o sonoros, o una mezcla de ambos, a través de textos, imágenes, gráficos, audio o vídeos y otros tantos materiales dinámicos o estáticos.

Se conoce como página web al documento que forma parte de un sitio web y que suele contar con enlaces (también conocidos como hipervínculos o links) para facilitar la navegación entre los contenidos.

Las páginas web están desarrolladas con lenguajes de marcado como el HTML, que pueden ser interpretados por los navegadores. De esta forma, las páginas pueden presentar información en distintos formatos (texto, imágenes, sonidos, videos, animaciones), estar asociadas a datos de estilo o contar con aplicaciones interactivas.


 1.1.- Clasificación 

Las páginas web se pueden clasificar de diferentes formas. Así tenemos:

Según la actualización de los contenidos, pueden ser estáticas o dinámicas:

  • Estáticas: Son aquellas que no cambian, que muestran siempre el mismo contenido cada vez que se cargan. Se realizan en lenguaje HTML. Los usuarios no pueden modificar o añadir información en el sitio web, de eso se encarga el administrador o administradores del sitio web.

  • Dinámicas: son aquellas cuyo contenido varía en función de las peticiones de los usuarios. Están soportadas en bases de datos que se actualizan continuamente. Se realizan en lenguajes como PHP y JavaScript. Los usuarios pueden añadir contenidos, modificar o comentar la información de las páginas web.

Según el acceso a los contenidos, los sitios pueden ser públicos o privados:
  • Públicos: Es un WebSite normal, una página dirigida al público general, sin restricciones de acceso en principio.
  • Extranet: Son Sitios limitados por el tipo de usuarios que pueden acceder, por ejemplo los proveedores de una empresa determinada, o los clientes.
  • Intranet: Son sitios cuyo acceso está restringido a una empresa u organización, normalmente funcionan dentro de redes privadas, aunque no siempre es así.

Según la temática de los contenidos:
  • Comerciales: Están creados para promocionar los negocios de una empresa. Su finalidad es económica. Su audiencia puede estar formada por clientes (actuales y potenciales), inversores (actuales y potenciales), empleados (actuales y potenciales) e incluso la competencia y los medios de comunicación. Podemos a su vez dividirlas en Corporativas (Informan sobre la empresa) y Promocionales (promocionan productos).
  • Buscadores: un sitio que proporciona información general y está pensado como entrada o búsqueda para otros sitios. Ejemplos Google, y Yahoo!
  • Comunidad Virtual: un sitio donde las personas con intereses similares se comunican con otros, normalmente por chat o foros. Por ejemplo: MySpace. Sitio weblog (o blog): sitio usado para registrar lecturas online o para exponer diarios online; puede incluir foros de discusión. Ejemplos: blogger, Xanga.
  • Comercio Electrónico: para compra y venta de bienes, como Ebay.com.
  • Wiki: un sitio donde los usuarios editan colaborativamente (por ejemplo: Wikipedia).
  • Educativo: promueven cursos presénciales y a distancia, información a profesores y estudiantes, permiten ver o descargar contenidos de asignaturas o temas. Son webs universitarias, docentes, académicas, etc
  • Portal Web: un sitio web que proporciona un punto de inicio, entrada o portal a otros recursos en Internet o una intranet.

1.2.- Funcionamiento

     En el funcionamiento de una página web confluyen muchas tecnologías, pero en una versión simplificada de cómo funcionan las cosas podemos afirmar que se trata de dos ordenadores (o teléfonos móviles, o tabletas...) que están conectados por una red llamada Internet mediante la cual se intercambian información que se puede leer, ver y escuchar.

En uno de estos intercambios un equipo solicita cierta información al otro, y este último sirve la información al primero. A este segundo equipo se le conoce como SERVIDOR, y al equipo que solicita la información, CLIENTE.

Por ejemplo, un usuario que actúa como cliente, solicita ver las noticias del día a un determinado periódico. La información solicitada está alojada en un ordenador, que actúa como servidor, de la empresa que publica el periódico.

Los sitios web son creados por programadores y diseñadores. Las persona encargadas de mantenerlos se llaman administradores o webmasters).

Los servidores son ordenadores conectados a la red Internet, que alojan páginas web y la ponen a disposición de los usuarios que lo solicitan.

Técnicamente, coexisten muchísimas tecnologías que intervienen para que todo esto funcione correctamente, DNS, IP, HTML, Servidores Web, Navegadores...
Además del cliente y el servidor, también existen estos elementos:
  • La conexión a Internet: Permite enviar y recibir datos en la Web.
  • TCP/IP: Protocolo de Control de Transmisión y Protocolo de Internet, son los protocolos de comunicación que definen cómo deben viajar los datos a través de la Web. 
  • DNS: Los servidores del Sistema de Nombres de Dominio (DNS, por sus siglas en inglés), son como una libreta de direcciones de sitios web. Cuando escribes una dirección web en el navegador, el navegador busca los DNS antes de recuperar el sitio web. El navegador necesita averiguar en qué servidor está alojado el sitio web y así enviar los mensajes HTTP al lugar correcto.
  • HTTP: El Protocolo de Transferencia de Hipertexto es un protocolo de aplicación que define un idioma para que los clientes y servidores se puedan comunicar.

  • Archivos componentes: Un sitio web se compone de muchos archivos diferentes, que son como las diferentes partes de los productos que comprarás en la tienda. Estos archivos se dividen en dos tipos principales:
    • Archivos de código: los sitios web se construyen principalmente con HTML, CSS y JavaScript, aunque te encontrarás con otras tecnologías más adelante.
    • Recursos: Este es un nombre colectivo para el resto de materiales que conforman un sitio web, como imágenes, música, video, documentos de Word, archivos PDF, etc.

2.- Criterios de diseño

El primer paso para diseñar una web es la fase de prediseño. Debemos analizar cual será la tematica de la web y los objetivos que queremos conseguir. Después debemos realizar una planificación para ir añadiendo contenidos y darle forma a nuestra web.

Algunos de los criterios que debemos seguir son:

- La página debe ser lo más sencilla posible, sin uso de complicados scripts, etc.
- La apariencia debe ser simple, no deben haber textos recargados, adornos, etc.


2.1. Prediseño y planificación

 Las principales preguntas que debemos hacernos antes de comenzar a crear nuestra web son:

1.- Objetivos: ¿Qué se pretende conseguir con la web?
2.- Público: ¿A quién se dirige?
3.- Contenidos: ¿Qué contenidos se quieren mostrar?
4.- Directrices: ¿Qué especificaciones se usarán en cuanto a forma, organización y estructura?
5.- Tecnología: ¿Con qué medios técnicos se cuenta para realizarla?
6.- Tiempo: ¿De cuanto tiempo se dispone?


Que el proyecto en Internet tenga éxito depende en gran manera de que el sitio sea apropiado para las funciones que deberá cumplir. Para ello, nada mejor que planificar desde un primer momento el desarrollo web del mismo.

1ª fase: plantear las metas que se quieren alcanzar, el público al que se dirigirá y el mensaje que se quiere transmitir.

2ª fase: detallar las necesidades que la web debe cubrir: cómo debe funcionar, en qué tipos de dispositivos y el contenido que se requerirá para hacer llegar el mensaje de la forma adecuada.

3ª fase: comenzar con el diseño del aspecto del sitio web, la colocación de los elementos y a hacer un bosquejo de los contenidos.

4ª fase: determinar el plazo total para completar el proyecto y distribuir las tareas que deben completarse de forma progresiva tanto a lo largo del tiempo como entre los responsables de cada área.

A lo largo de todo el desarrollo, es necesario evaluar de forma periódica los avances realizados para asegurarse de que se cumplen los objetivos marcados.

2.2.- Estructura de una web

Uno de los aspectos más importantes de las estructura de una página web es decidir dónde posicionaremos los menús de navegación y enlaces a otras páginas web y dónde posicionaremos el contenido que van a consultar los navegantes.

Existen diversos tipos de estructuras estándares de páginas web que especifican la posición de los menús de navegación y el contenido, manteniéndose esta estructura y diseño durante toda la navegación por el sitio web. Lo que define el diseño de una página web es la forma de organizar los elementos que la componen.
Básicamente, los sitios web se componen y estructuran de la siguiente manera:
Contenedor: Elemento que abarca al resto de las parte de la web. Dentro de este contenedor estarán todos los elementos del sitio; módulos, contenidos, imágenes, etc.

Logotipo: es la imagen o símbolo identificativo de la empresa, entidad, organización, equipo, etc., que identificará la marca en todo el sitio. Puede ser el logotipo o el nombre. Al estar arriba acompañara la navegación por todo el sitio ayudando al reconocimiento de la marca.

Navegación: la forma más aceptada y fácil, es el menú horizontal, que tiene los enlaces a cada una de las partes del sitio web. Los menús verticales pueden usarse como complementos o sub menús, de los horizontales.

Contenido: lo más importante y fundamental de una buena página. Lo que mantiene al visitante cautivo e interesado. Si el contenido es bueno e interesante, llamará la atención del visitante y hará que permanezca más tiempo en el sitio. El mejor lugar debe ser para los contenidos. Para Google, el contenido es el rey.

Pie de página o footer: localizado al final del sitio, abajo, generalmente dejamos ahí información de Copyright y legales o menús secundarios. Aunque en los últimos años, se usa mucho para incluir información de redes sociales, direcciones, noticias.

2.3.- Elementos de diseño

Algunos de los elementos que influyen en el aspecto de una página web son:

1.- Contenido:
La página debe ser atractiva en su parte visual y además debe tener un contenido interesante que atraiga lectores. El contenido debe seer apropiado para la temática y objetivos del blog, y actualizado frecuentemente. El contenido da la posibilidad real de aumentar el número de visitas y permite fidelizar a los visitantes asiduos.

2.- Imágenes:
Deben usarse buenas fotografías e imágenes de cierta calidad. Es importante presentar imágenes que no estén pixeladas (baja resolución) o desenfocadas, esto da una idea sobre la calidad misma del sitio. También se pueden utilizar ilustraciones sencillas (imágenes vectoriales), esquemas, gráficos, mapas, etc.

3.- Tipografía:
Es importante utilizar fuentes llamativas pero que conserven una fácil legibilidad. La tipografía debe llamar la atención del usuario pero debe conservar la línea de diseño del sitio.
También es importante variar el tamaño de una misma fuente para resaltar secciones interesantes del texto.

4.- Botones e iconos:
Utilizar botones prácticos y representativos, así como iconos grandes y vistosos aumenta la facilidad de navegación en la página y se dan una guía clara a los usuarios, no es necesario colocar accesorios que no van a brindar un valor real, por ejemplo un reloj para clientes que se encuentran en el mismo uso horario.

5.- Animaciones y movimiento:
Para generar una sensación de dinamismo, es bueno utilizar elementos animados. Pero es importante no excederse con los elementos móviles, la cuota del 20% del total de la pagina es suficiente, porque pueden causar saturación, distraer la atención de las cosas importantes que se quieren decir y por ultimo sacar al usuario del sitio.

6.- Fondos claros y sencillos:
Los fondos claros o totalmente blancos facilitan la visualización, también dan un aspecto despejado a la página resaltando las imágenes, existe la tendencia a utilizar fondos negros para lecturas largas, para no cansar al lector con la luz del monitor.

7.- Enlaces a redes:
Es de gran ayuda para los usuarios incluir enlaces a redes sociales con las cuales se tiene familiaridad y se interactúa con regularidad, también a sitios de interés. Esto con el fin de generar comunidad y crear lazos de mutuo intercambio con sitios que pueden apalancar la oferta, como proveedores y clientes actuales.

8.-Sobriedad:
Una página debe permitir una fácil visualización de los contenidos (videos, imágenes, textos), saturar al cibernauta es contraproducente, si la información o contenido tarda en ser cargado es una visita menos y un potencial cliente o negocio que no conoció la oferta que se propone, tener un diseño sencillo con botones o enlaces en el lugar adecuado, genera un fácil reconocimiento y navegación que en posteriores visitas se traduce en una identificación con los usuarios.

9.- Menús desplegables: Es muy conveniente que el blog disponga de un menú con las principales materias sobre las que trata, que permitan un acceso fácil y rápido a cada una de las partes, páginas o entradas del blog. El menú de estar bien ordenado, ser claro, y facilitar la navegación por el sitio. Es conveniente usar menús desplegables clasificados y agrupados dentros de los bloques principales.


2.4.- Estándares de accesibilidad de la información

Criterios de accesibilidad de páginas web

Según la W3C-WAI (Web Accesibility Initiative del World Wide Web Consortium) las causas más importantes de falta de accesibilidad muchas páginas web para todos los usuarios, y a las que los diseñadores deben prestar por tanto mayor atención, son las siguientes:
  • Falta de estructuración en las páginas que desorienta al usuario y dificulta la navegación.
  • Abuso de los elementos estructurales de HTML con el único propósito de la maquetación y distribución en pantalla del contenido de la página.
  • Basarse excesivamente en la información gráfica (imágenes, mapas de imagen, tablas usada para formatear columnas, marcos, scripts Java, elementos multimedia, etc) sin proporcionar adecuadas alternativas de texto u otro formato complementario.
Para más información sobre los problemas de accesibilidad en web consultar:

http://acceso.uv.es/accesibilidad/Estudio/criterios.htm

3.- Herramientas de publicación: gestores de contenido

3.1.- ¿Qué es un CMS?

Los sistemas de gestión de contenidos (Content Management Systems o CMS) son software que se utiliza principalmente para facilitar la gestión de webs, ya sea en Internet o en una intranet, y por eso también son conocidos como gestores de contenido web (Web Content Management o WCM). Hay que tener en cuenta, sin embargo, que la aplicación de los CMS no se limita sólo a las webs.

James Robertson propone una división de la funcionalidad de los sistemas de gestión de contenidos en cuatro categorías: creación de contenido, gestión de contenido, publicación y presentación.

3.2.- Creación de contenido

Un CMS aporta herramientas para que los creadores sin conocimientos técnicos en páginas web puedan concentrarse en el contenido. Lo más habitual es proporcionar un editor de texto WYSIWYG, en el que el usuario ve el resultado final mientras escribe, al estilo de los editores comerciales, pero con un rango de formatos de texto limitado.

Para la creación del sitio propiamente dicho, los CMS aportan herramientas para definir la estructura, el formato de las páginas, el aspecto visual, uso de patrones, y un sistema modular que permite incluir funciones no previstas originalmente.

3.3.- Gestión de contenido

Los documentos creados se depositan en una base de datos central donde también se guardan el resto de datos de la web, cómo son los datos relativos a los documentos
(versiones hechas, autor, fecha de publicación y caducidad, etc.), datos y preferencias de los usuarios, la estructura de la web, etc.

3.4.- Publicación de contenidos

Una página aprobada se publica automáticamente cuando llega la fecha de
publicación, y cuando caduca se archiva para futuras referencias. En su publicación se aplica el patrón definido para toda la web o para la sección concreta donde está
situada, de forma que el resultado final es un sitio web con un aspecto consistente en
todas sus páginas.

3.5.- Presentación de contenidos

Un CMS puede gestionar automáticamente la accesibilidad del web, con soporte de
normas internacionales de accesibilidad como WAI, y adaptarse a las preferencias o
necesidades de cada usuario. También puede proporcionar compatibilidad con los
diferentes navegadores disponibles en todas las plataformas (Windows, Linux, Mac,
Palm, etc.) y su capacidad de internacionalización lo permite adaptarse al idioma,
sistema de medidas y cultura del visitante.

3.6.- CMS comerciales y de código abierto

Se puede hacer una primera división de los CMS según el tipo de licencia escogido.
Por una parte están los CMS comercializados por empresas que consideran el código
fuente un activo más que tienen que mantener en propiedad, y que no permiten que
terceros tengan acceso. Por la otra tenemos los de código fuente abierto, desarrollados por individuos, grupos o empresas que permiten el acceso libre y la
modificación del código fuente.

PHPNuke, fue la herramienta decódigo abierto que popularizó el uso de estos sistemas para las comunidades de usuarios en Internet, se empezó a desarrollar el año 2000.


También las aplicaciones que rodean los CMS acostumbran a ser estándar (de facto),
como los servidores web Apache y ISS; los lenguajes PHP, Perl y Python; y las bases
de datos MySQL y PostgreSQL. La disponibilidad para los principales sistemas
operativos de estas aplicaciones y módulos, permite que los CMS puedan funcionar en diversas plataformas sin muchas modificaciones.

Algunos ejemplos de gestores de contenidos por ámbito de empleo son:

Para creación de blogs: Blogger, Wordpress,...
Para gestión de foros: phpBB, MyBB, etc...
Para gestión de galerías de imágenes: Coppermine,  Gallery, etc...
Para gestión de wikis: Mediawiki, Pmwiki, etc....
Para plataformas de educación: Moddle, Mahara, etc.
Para comercio electrónico: Oscommerce, Magento, etc...
Para creación y gestión de portales: Joomla, Drupal, Evolution, PHPnuke, Mambo, etc.

OpenCms es el gestor de contenido de código abierto mas profesional que hay
en el mercado. Ayuda a crear y dirigir complejos sitios webs sin dificultades y
sin conocimiento previo de HTML.

Magnolia es el primer CMS basado en Java y desarrollable en J2EE que ha
sido creado desde cero para soportar el próximo estándar Java Content
Repositories (JCR).

4.- El lenguaje HTML

4.1..- ¿Qué es HTML?

HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.

HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan en la actualidad.

4.2.- ¿Cómo se usa HTML?

Para la escritura de este lenguaje, se crean etiquetas que aparecen especificadas a través de corchetes o paréntesis angulares: < y >. Entre sus componentes, los elementos dan forma a la estructura esencial del lenguaje, ya que tienen dos propiedades (el contenido en sí mismo y sus atributos).

- Etiquetas o tags: Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML. Las etiquetas o tags son la forma de escribir código HTML. En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma: . Donde es la etiqueta de apertura y es la etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para distintos usos

4.3.- Utilización de las etiquetas

Las etiquetas pueden tener atributos que permitirán definir diferentes opciones de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo de igual.

El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra deberá expresarse entre comillas, en otro caso no será necesario.

Dentro del encabezamiento, la etiqueta principal es la del título, representado por la etiqueta </b> </font> <font size="3">En el cuerpo del documento se pueden establecer diferentes categorías utilizando diversos tamaños de fuentes y estableciendo así la estructura básica del documento. </font>Dentro del cuerpo se coloca el contenido de la página web: textos, imágenes, tablas, formularios, gráficos, mapas sensibles, etc. La información se puede estructurar en párrafos y/ o secciones con cabeceras de distinto nivel, <a href="http://www.hipertexto.info/documentos/enlaces.htm">enlaces</a> a otras partes del mismo documento, a documentos distintos, o a documentos que estén en distinto servidor, etc. </p> <p align="justify">  </p> <p align="justify"> <font size="3">También podemos determinar el estilo y tipo de letra mediante los atributos, como son los de final de línea </font> <font size="2"><b><br></b></font><font size="3"> y final de párrafo <p> , los de presentación de texto preformateado, es decir, manteniendo los espacios y retornos de carro</font><font size="2"><b> <pre></b></font><font size="3"> o los de negrita </font><font size="2"><b><b></b></font><font size="3">, cursiva </font> <font size="2"><b><i></b></font><font size="3">, centrado </font><font size="2"><b><center> </b></font><font size="3">, etc. Además se pueden definir listas numeradas y no numeradas, glosarios, trazar líneas horizontales para separar textos, insertar comentarios, etc. </font></p> <p align="justify"> <br><font size="3">Pero, sin duda, los elementos más característicos del lenguaje HTML y que dotan a los documentos con él creados de la característica hipertextual, son las <a href="http://www.hipertexto.info/documentos/anclajes.htm">anclas o anclajes</a> utilizados para establecer los <a href="http://www.hipertexto.info/documentos/enlaces.htm">enlaces</a>, ya se trate de <a href="http://www.hipertexto.info/documentos/texto.htm">texto</a> o <a href="http://www.hipertexto.info/documentos/imagen.htm">gráficos</a>. </font>Para fijar un <a href="http://www.hipertexto.info/documentos/enlaces.htm">enlace</a>, se debe enmarcar el texto que aparecerá subrayado para que el usuario pueda pulsarlo y le redirija a la dirección o URL marcada. La etiqueta ancla debe incluir el parámetro <b> <font size="2">href="URL"</font></b> y el texto para pulsar. Si se trata de imágenes, éstas se insertan mediante la etiqueta <b><font size="2">src="URL" </font></b>y también podemos conseguir que el gráfico se convierta en un enlace mediante la etiqueta correspondiente.</p> <h4 align="justify"> <font face="Arial">4.4.- Creación de documentos HTML</font></h4> <p align="justify"> Para crear documentos HTML sólo es necesario :</p> <ul> <li> <p align="justify"> <b> Un procesador de textos </b>o un editor de documentos HTML</p> </li> <li> <p align="justify"> <b> Un navegador del WWW</b> o lo que se denomina "programa cliente" que permite el acceso a páginas WWW de <a href="http://www.hipertexto.info/documentos/internet.htm">Internet</a>. </p> </li> </ul> <h3> <a name="editores"></a><font face="Arial">Editores</font></h3> <p align="justify"> Los documentos HTML están en formato de texto sencillo (también conocido como <span style="mso-ansi-language:ES" lang="ES"> <a href="http://www.hipertexto.info/documentos/morfologias.htm#ASCII">ASCII</a></span>), por eso se puede utilizar un simple procesador de textos para escribir un documento en lenguaje HTML. Este archivo será posteriormente interpretado por el programa <span style="font-family: Arial"> <a href="http://www.hipertexto.info/documentos/web_tecnolog.htm#navegador">navegador</a></span> correspondiente, siempre que el documento esté guardado en formato: "sólo texto". Una vez creado el documento HTML, lo guardaremos con la extensión .html ó htm.</p> <p align="justify">  </p> <p align="justify"> Se puede usar el Bloc de notas de Windows o cualquier otro editor de textos sencillo. Sin embargo, hay que tener cuidado con algunos editores más complejos puesto que formatean el texto y colocan su propio código especial al guardar las páginas y  HTML debe ser únicamente texto plano, con lo que podríamos tener problemas. Si creamos un documento HTML en un editor de texto que formatee dicho texto, debemos guardar el documento como documento de texto sin formato.</p> <p align="justify">  </p> <p align="justify"> El texto escrito tiene dos partes bien diferenciadas, el contenido de la información y el conjunto de etiquetas del lenguaje HTML, que permiten determinar el estilo y el tipo de letra que tendrá la presentación del documento final y que pueda ser leído por un programa cliente. </p> <p> <br></p> Los editores HTML se clasifican en 3 tipos: <br> <br> <b>Wysywyg:</b> (what you see is what you get -lo que ves es lo que obtienes-): son editores que muestran en <a href="http://www.hipertexto.info/documentos/pantalla.htm">pantalla</a> de forma inmediata lo que se va creando. Son muy útiles para apreciar los colores y la disposición de los elementos.<br><br> <b>No Wywywyg:</b> editores que necesitan una aplicación externa (el <a href="http://www.hipertexto.info/documentos/web_tecnolog.htm#navegador">navegador</a> o browser) para mostrar lo que se va creando. Son útiles para recordar los comandos HTML y sus atributos.<br><br> <b>Mixtos: </b>presentan la <a href="http://www.hipertexto.info/documentos/pantalla.htm"> pantalla</a> dividida en dos <a href="http://www.hipertexto.info/documentos/pantalla.htm#ventana">ventanas</a>, una con el código HTML y otra con el resultado final, o permiten la visualización de ambos en <a href="http://www.hipertexto.info/documentos/pantalla.htm#ventana">ventanas</a> diferentes que se pueden visualizar de forma alternativa.<h3> <a name="conversores"></a></h3> <p> <br></p> <p> <br></p> <p> Actividad 1: Diseñar un blog en Blogger de Google con una temática a elección tuya, por ejemplo: deportes, fauna, flora de un lugar concreto, cocina internacional, rutas de senderismo, rutas turísticas, etc.</p> <p> <br></p> <p> - Crear el logotipo de nuestro blog con un programa de diseño gráfico.</p> <p> - Insertar nuestro logotipo en la cabecera del blog</p> <p> <br></p> <p> <font class="_D8e"></font></p>



4.4.- Creación de documentos HTML

Para un mejor aprendizaje práctico del lenguaje HTML os recomiendo esta web:

https://www.websiteplanet.com/blog/html-guide-beginners/

Si bien el HTML (lenguaje de marcado de hipertexto) generalmente se considera un "lenguaje de codificación", no es un lenguaje muy poderoso. Es decir, el HTML por sí solo no se puede utilizar para realizar todas las tareas que, en teoría, pueden ser realizadas por las computadoras.

Conceptos básicos


HTML está literalmente diseñado para decirle a su navegador (como Chrome o Firefox): “Esto es lo que necesita mostrar en la pantalla. Hazlo." Es decir, HTML define el contenido real de la página web en la que se encuentra. Lo hace a través de etiquetas.

Esas etiquetas están entre símbolos de mayor y menor. La etiqueta "p" define específicamente un párrafo o bloque de texto general. También debe tener en cuenta cómo la "etiqueta de cierre" utiliza un carácter "/" para diferenciarse de la "etiqueta de apertura". No todas las etiquetas funcionan de esta manera. 
Tu primera página web

HTML como lenguaje ha pasado por varias revisiones a lo largo de los años. Actualmente, la versión estándar de HTML se llama HTML5, aunque difícilmente podría llamarse la quinta iteración, como tal. Es una convención de nombres nacida de la conveniencia y la marca más que la precisión.
HTML5 nació de la frustración y la rabia de los nerds, y estaba destinado a simplificar drásticamente la experiencia de escribir HTML a mano, así como a hacer que el código sea más fácil de leer tanto para humanos como para computadoras. Específicamente, fue diseñado para proporcionar más contexto sobre el contenido de la página.
Si quieres conocer la lista de elementos o etiquetas HTML5 visita esta web:

https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

Ejemplo de formulario en HTML5:

<form action="">
  <label for="GET-name">Nombre:</label>
  <input id="GET-name" type="text" name="name">
  <input type="submit" value="Save">
</form>
  
 
 





No hay comentarios:

Publicar un comentario