➜ Google Activate | Curso de Introducción al Desarrollo Web: HTML y CSS | Módulo 3 y EXÁMEN

Cómo se escribe una página web

Aprende los fundamentos de la creación de las páginas web con HTML, el lenguaje de marcado que se emplea para escribir páginas web.

1. Presentación
Comprueba tus conocimientos

 

Mari Ángeles tiene una tienda física de quesos en pleno centro de Madrid. Muchos clientes que han venido a la ciudad de visita le han sugerido que abra una página web para poder hacer envíos a todos los lugares de España.

¿Qué debe tener en cuenta Mari Ángeles a la hora de abrir una página web?



A la hora de crear una página web es necesario tener en cuenta que la creación del hipertexto ya que el hipertexto es la característica principal que define a la web. Las páginas web tienen su propio vocabulario, que define las etiquetas que se deben emplear y la gramática, que son las reglas que establecen cómo se deben emplear dichas etiquetas para escribir un documento. 

2. El desarrollo web
Comprueba tus conocimientos

 

Sofía está organizando un nuevo proyecto en su empresa y para ello necesita hacer una división de las tareas. El nuevo proyecto es la creación de una página web para buscar casa. Para este proyecto necesitará varios perfiles, entre ellos los perfiles de desarrollador web y diseñador web.

¿De cuáles de las siguientes tareas se encargará el diseñador web?

• • 
    Elegir la tipografía.
  • Elegir los colores.
  • Elegir los tamaños.
  • Crear lenguajes de script.

Cuando se habla de desarrollo web, mucha gente lo confunde con diseño web. Existen dos puestos diferentes en los que cada perfil tiene unas tareas determinadas. Las tareas del diseñador web están más destinadas al diseño visual de la página web, es decir, se encarga de tareas como elegir la tipografía y el tamaño del texto que aparecerá en la página web, así como de la elección de los colores. 

 
3. Prototipado: wireframes, mockups y prototipos
Comprueba tus conocimientos 

 

Teresa es especialista en arquitectura de la información. Hoy se ha reunido con un cliente y al final de la sesión, ha acordado presentarle un prototipo de web en los próximos días. Para ello, ha tenido que dejar definidos varios criterios básicos que necesita conocer antes de empezar a trabajar.

¿Podrías identificar, del siguiente listado, qué datos necesita conocer antes de empezar?

 

Efectivamente nunca debemos comenzar un prototipo sin definir todos estos elementos. En los prototipos nunca se trabaja el diseño, de ahí que se utilice una gama de grises. Un prototipo funcional de alta fidelidad es una maqueta dinámica o HTML que simula o tiene implementadas partes del sistema final a desarrollar.
 

4. Historia de HTML
Comprueba tus conocimientos



Luis es desarrollador web. Hoy ha acudido a una charla TED muy interesante sobre los orígenes del lenguaje de marcado. El ponente ha comentado que SGML es el padre de HTML y que, como todos los hijos, HTML tiene cosas en común con su padre, pero también rasgos propios.

Identifica, del siguiente listado, qué etiquetas son propias de HTML. 

SGML es un sistema de reglas de etiquetado surge en base a la ISO 1986 sobre organización y etiquetado de texto. Actualmente su equivalente es XML. HTML es un lenguaje de marcado y etiquetado con base en SGML su principal característica es la etiqueta para enlaces o hipervínculos <a href="">.

5. HTML: conceptos básicos (parte 1)
Comprueba tus conocimientos

 

Marta quiere aprender a programar en HTML para progresar en su empresa. Está visitando tutoriales para comenzar su aprendizaje en HTML. Está revisando en concreto la estructura de los elementos que lo componen.

Ayuda a Marta seleccionando la opción correcta en cada una de las siguientes opciones

El orden dentro de los elementos de HTML es muy importante. Es el siguiente: etiqueta inicial, atributo, valor (pueden llevarlo o no), contenido y etiqueta final. La etiqueta final nunca lleva atributos y se caracteriza por llevar una /, es decir, etiqueta inicial , etiqueta final >.

6. HTML: conceptos básicos (parte 2)
Comprueba tus conocimientos



David imparte clases de programación en HTML y va a realizar la primera práctica con sus alumnos. En esta práctica tienen que realizar una sencilla simulación creando un código utilizando las principales etiquetas y creando así los elementos para una demo.

Ordena el siguiente listado de etiquetas para que la demo funcione correctamente. 

Es muy importante recordar cerrar las etiquetas. La sección <body>, a diferencia de la <head>, sí que va a mostrar todo lo que se escriba en la página web. El código se puede escribir seguido o espaciado. Esto no implicará ningún cambio en la programación, lo importante es crear los elementos siguiendo el orden de los componentes correcto y teniendo en cuenta sus características específicas.
 

7. HTML: conceptos básicos (parte 3)
Comprueba tus conocimientos



Jaime ya lleva bastante tiempo programando en HTML, charlando con Marta sobre su primera y exitosa experiencia con el bloc de notas de Microsoft, le ha recomendado utilizar el editor Notepad++ que dispone de herramientas muy útiles que facilitan la creación de código.

Señala qué opciones ofrece Notepad++.

Notepad++ se puede descargar en el sistema operativo. Es un editor web con licencia GLP que permite, una vez descargado, editar cualquier fichero pulsando el botón derecho con la opción edit with Notepad++. La opción Control+ permite desplegar una lista para autocompletar las etiquetas. Seleccionando las etiquetas empareja la etiqueta de apertura con la de cierre, además, permite cerrar páginas para trabajar únicamente con la que se necesiten. Por último y muy importante, permite modificar los saltos de línea y cambiar el formato a UNIX y Macintosh.
 

8. HTML: conceptos básicos (parte 4)
Comprueba tus conocimientos


Marta conoce bien cuáles son las palabras que forman el lenguaje HTML pero tiene dudas sobre las reglas que indican cómo combinar el vocabulario para formar textos complejos, es decir, la gramática.

Selecciona la opción correcta sobre reglas gramaticales comunes a todas las versiones de HTML.

Además de que los atributos vayan entre comillas simples o dobles, se debe recordar otras reglas como que las etiquetas deben cerrarse, que pueden ir en minúsculas y que los elementos tienen que anidarse siguiendo el orden establecido. También es aconsejable utilizar los nombres de los ficheros del alfabeto inglés, los números, el guión y el guión bajo. Se pueden utilizar otros caracteres pero pueden dar problemas. Por último, es importante recordar que las extensiones de las páginas web son .htm o .html. 

 
9. HTML: listas (1)
Comprueba tus conocimientos

Alicia quiere incorporar en su página web diferentes tipos de listas. Unas listas atenderán a las características de los productos, por lo que el orden no es importante. Otras listas dependerán de la demanda de los productos, que serán expuestos en ranking. La última lista corresponderá al glosario de términos disponible para sus clientes.

¿Cuáles son los criterios que Alicia tiene que considerar dependiendo del tipo de lista? ¿Qué atributos puede utilizar con HTML4?

Los términos de las listas, tanto ordenadas (identificadas con <ol>) como no ordenadas (identificadas con <ul>), se determinan con <li>, indicando andemás números para las ordenadas o símbolos y letras para las no ordenadas. En el caso de listas descriptivas se usará <dd> y el aumento de la sangría izquierda para indicarlos. El orden de aparición no es importante en las listas no ordenadas y descriptivas. Por último, hay que recordar que se pueden anidar listas, es decir, incluir unas listas (sublistas) dentro de otras combinando los tres tipos de listas disponibles en HTML. Los atributos de HTML4 para <ol> son start y type.
 

10. HTML: enlaces
Comprueba tus conocimientos



Damián está terminando su trabajo fin de máster y tiene que revisar toda la bibliografía que ha utilizado para hacerlo. Tiene que incluir también varios enlaces a páginas web y a documentos externos pero tiene que tener cuidado a la hora de escribir estos enlaces.

¿Qué consejos debería seguir Damián para que sus enlaces fueran comprensibles y realizaran efectivamente su función?

 

A la hora de crear un enlace es importante tener cuidado con las mayúsculas y las minúsculas. Normalmente se recomienda usar letras minúsculas. Hay que tener cuidado a la hora de introducir caracteres extraños en los enlaces, ya que pueden resultar confusos. Por último, se debe prestar especial atención a las rutas de los enlaces creados para que redirijan al usuario al punto deseado.
 

11. HTML: problemas con los editores
Comprueba tus conocimientos



Rocío está creando una página web para subir actividades a sus alumnos de inglés. Hasta ahora siempre había utilizado el sistema operativo Windows, pero hace unos meses se ha comprado un ordenador de Apple por lo que ahora tiene que utilizar Macintosh. Ha visitado foros para ver cómo utilizar editores y ha leído que, por ejemplo, los editores no siempre funcionan de la misma manera en los diferentes sistemas operativos.

De la información que ha podido recopilar Rocío sobre los editores de texto, ¿cuáles de las siguientes opciones no son correctas? 

Existen editores de texto gratuitos y de pago, y dentro de estos hay editores de texto que sirven para Windows, otros para Linux y otros para Macintosh. Es importante saber trabajar con más de un editor de texto.
 

12. HTML: tres errores típicos
Comprueba tus conocimientos 

 


Concha es ingeniera de telecomunicaciones jubilada. Ha trabajado en este sector toda su vida por lo que tiene un alto conocimiento de lo que ocurre al usar los navegadores web. Ha creado un blog de dudas para usuarios de HTML en el que va a intentar resolver todas las dudas que los usuarios le propongan.

¿Cuáles son los tres errores típicos al utilizar HTML? 

 

Los tres errores típicos más cometidos son: utilizar los saltos en línea de manera errónea (por ejemplo utilizándolos en el contenido de un párrafo), los espacios en blanco que no se detectan y las referencias de caracteres, ya que se utilizan de forma errónea.
 

13. [A+] Prototipos visuales de alta fidelidad
Comprueba tus conocimientos



Susana va a empezar a realizar un prototipo de web para un cliente. Le han enviado una estructura de carpetas para tener organizado todo el material relativo a su proyecto.

Ayúdala organizándolas de tal forma que sepa qué incluir en cada fase del proyecto en cada una de ellas.

 

Es importante tener una carpeta en la que ordenes tus prototipos, y guardar los originales haciendo una copia del documento maestro. Es aconsejable trabajar con editables y registrar los cambios relevantes del diseño en un documento además de preparar versiones finales independientes para subirlas a Internet.

 

 EXÁMEN

Cómo se escribe una página web
 

Pregunta 1 Cuando creamos un fichero con código HTML tenemos que guardarlo con la extensión: 

• A .txt
• B .doc
• C .css
• D .html

Con el lenguaje HTML solo se describen la estructura y el contenido de una web, que pueden ser imágenes, vídeos u otros componentes de las páginas web. A la hora de crear un fichero con código HTML tenemos que guardarlo con la extensión .html. 

 
Pregunta 2 El diseño visual de una página web define: 

• A El comportamiento de la página.
• B El <look&feel> de la página.
• C El código HTML de la página.
• D Solo define los colores de la página.

En un proyecto web es importante diferenciar dos perfiles: el diseñador web y el desarrollador web. En ocasiones, si el proyecto es pequeño, el desarrollo y el diseño pueden ser realizados por la misma persona. El comportamiento de la página y el código HTML serían tareas desempeñadas por el desarrollador web. El diseñador web tiene que diseñar los elementos gráficos de la página teniendo en cuenta la tipografía, los colores, los tamaños, etc. Define, por tanto, el <look&feel> de la página. 

 
Pregunta 3 ¿Qué es un Wireframe en el desarrollo de una página web?

• A El código HTML a partir del cual de desarrollan todas las páginas web.
• B Un dibujo que representa la estructura visual de una página web, indica qué contenido debe de estar presente y define el comportamiento funcional de la misma.
• C Un programa que permite crear páginas web de forma automática.
• D Un programa que se ocupa de diseñar el <look&feel> de la página web.

Las aplicaciones web deben tener una estructura y diseño determinado que dependerá de cuál sea el objetivo de dicha página web. Antes de empezar a hacer la página web, es necesario hacer un mapa o diagrama de cómo será esta página web. Es importante que este diagrama sea comprensible y refleje el flujo de navegación y la relación entre los elementos. Existen diferentes tipos de planos o diagramas, siendo uno de ellos el Wireframe. Wireframe es un dibujo que representa la estructura visual de una página web, indica qué contenido debe de estar presente y define el comportamiento funcional de la misma.
 

Pregunta 4 ¿Cuál de estos elementos no estaba incluido en la primera versión de HTML? 

• A Lista.
• B Párrafos.
• C Tablas.
• D Texto con formato (negrita, cursiva, etc.).

Las primeras versiones de HTML, entre 1990 y 1993, no fueron estandarizadas porque su uso no estaba muy extendido. Las primeras versiones de HTML incluían listas, párrafos y diferentes tipologías de grafología, pero no incluía tablas, que son elementos esenciales hoy en día.