1.Crea la estructura de un documento HTML con título: “1ºDAW”. El objetivo de este sitio será presentar los ejercicios del módulo. Utiliza un diseño y una estructura personal para el sitio, pero no olvides utilizar criterios de usabilidad y accesibilidad.

Creamos el documento HTML llamado 1daw.html y lo utilizaremos como página principal para presentar las actividades.

2.Crea la estructura de un documento HTML con título: “Las recetas de la abuela”. El objetivo de este sitio será mostrar recetas de cocina.

Si está interesado en recetas de cocina caseras debería visitar la página de las recetas de la abuela.

3.Instala en tu navegador la extensión para desarrolladores y valida los documentos creados.

Una extensión para desarrolladores es: Web Developer. Si está interesado en instalarlo para su navegador le facilito los enlaces para los navegadores:

Extensión Web Developer para navegadores Google Chrome.

Extensión Web Developer para navegadores Firefox.

Extensión Web Developer para navegadores Ópera.

4.Añade la etiqueta <abbr> al título 1ºDAW. ¿Para qué se utiliza?

La etiqueta <abbr> se utiliza para mostrar desglosado el significado de una abreviatura o unas siglas, por ejemplo, si usted ubica el puntero del cursor sobre "sr." podrá comprobar como se despliega un indicador que le explica que esta abreviatura corresponde a "Señor". Veámos el ejemplo aplicado a 1ºDAW en la siguiente imagen:

5.Diferencias entre los elementos <header> y <h1>

<header>: Se trata de una etiqueta de estructura que va dentro de la etiqueta <body> y que indica al navegador que es la cabecera de la web o, incluso, podría ser la cabecera de una sección o artículo. Le aporta al navegador información semántica y en su interior puede contener las etiquetas <h1>-<h6>

<h1>: A diferencia de la etiqueta <header> la etiqueta <h1> no es una etiqueta de estructura y sirve para remarcar encabezados dentro de un header.

6. Escribe una pequeña página donde utilices los elementos <div> y <span>

Voy a optar por escribir dentro de la misma pregunta una pequeña sección construída con etiquetas <div> y <span> y, junto a este pequeño fragmento una imagen del código.

Fragmento de página con etiquetas <div> y <span>:

Noticia 1: ¿Cómo hacer una web con etiquetas <div> y <span>?

Una página web con etiquetas <div> es una página construída estructuralmente como se realizaba antes del HTML5, es decir, en la época en la que la tecnología HTML iba por su versión 4.

Toda esta sección está siendo etiquetada con las etiquetas <div> propuesta, pero la etiqueta <span> sirve para dar color al texto como, por ejemplo, este mismo que está usted leyendo que está en color azul.¿Qué no le gusta el color azul? Tal vez en rojo le guste más. ¿En verde? ¿Morado? Para eso sirve la etiqueta <span>.

Imagen del texto de la sección etiquetada con <div> y <span>

7.Crea dos párrafos con el mismo id y prueba el código en CodePen. ¿Qué resultado obtienes? Valida el código en W3C. ¿Qué resultado obtienes?

8.Clasificas las etiquetas <i>,<b>,<strong>,<em> en etiquetas de estilo o etiquetas semánticas.

<i>: Se trata de una etiqueta de estilo, en este caso la etiqueta aplicará el estilo de cursiva al texto al que esté etiquetando, como por ejemplo este mismo.

<b>: Se trata de una etiqueta de estilo, esta etiqueta pondrá en negrita al texto que lleve etiquetado.

<strong>: Es una etiqueta de tipo semántica, visualmente podemos apreciar un texto en negrita pero va más allá de la simple visualización, al ser una etiqueta semántica le estamos indicando al navegador, de cara a realizar la estructura de una página web, que el texto aquí contenido tiene especial relevancia lo cual ayudaría de cara a que un motor de busquedas, como Google, a que encuentre nuestra página web como una web que trata sobre el asunto que el usuario está buscando.

<em>: Este es un ejemplo de etiqueta <em> Es una etiqueta de estilo, que sirve para enfatizar un texto, hoy día casi en desuso pues estos estilos se pueden aplicar con CSS.

9. Trabaja con los siguientes documentos HTML.

Completa el documento y añade al párrafo un tooltip “Aprendiendo lenguajes de marcas”. Utiliza la extensión para desarrolladores para validar el documento.
Completa el documento y añade como cabecera Madrid y una línea horizontal separándola.
Valida, corrige y vuelve a validar el siguiente documento.
Crea un documento HTML cuya visualización en el navegador sea:


public class 
{
    public static void main(String args[]) 
    {
        for(int i=500; i<=1000; i+=2) {
            System.out.println(i);
        }
    }
}

Completa el documento teniendo en cuenta que x es una variable.
Crea un documento HTML cuya visualización en el navegador sea:

Tema 3 - Actividad 1

Lenguaje de Marcas 2018/19

Fragmento de página con etiquetas <div> y <span>:

Noticia 1: ¿Cómo hacer una web con etiquetas <div> y <span>?