En la cabecera <head> de la página hay que:
En el fragmento en inglés (línea 18) aparecen los caracteres especiales < y > que se deben sustituir por las entidades de carácter < y >.
En el párrafo "El uso de los emoticonos ..." aparecen dos entidades numéricas, los emoticonos smileys ☺ y ☹. En la página web se debe escribir ☺ y ☹.
En ese mismo párrafo aparece un ampersand (se muestra el texto ☺). Si se escribe ese texto tal cual, en la página web se mostrará el emoticono, no el texto, ya que el navegador lo interpreta como entidad numérica. Para mostrar la entidad numérica como texto, en la página web se debe escribir &x263A;.
Al desactivar la hoja de estilo se puede identificar las siguientes etiquetas:
Para centrar la imagen de los emoticonos antiguos, se puede insertar la imagen en un párrafo <p> con clase.
Las dos entidades de carácter smileys se ven más grandes que su tamaño original. Para ello se les puede incluir en un <span>, que no necesitaría clase puesto que en la página no hay otros tipos de <span>.
El smiley SVG está flotando a la izquierda, por lo que se necesitará una clase de imágenes <img> izquierda.
Los emojis SVG están insertados en el texto, por lo que no necesitan clase, aunque sí la propiedad vertical-align para que se muestren centrado en vertical.
En este ejercicio se utiliza el tipo de letra genérico sans-serif.
Observando la alineación de la parte superior de las imágenes con el texto, se deduce que:
Observando además la alineación de los lados izquierda y derecha de la imagen flotante con el texto, se deduce que:
Observando la separación entre el smiley SVG y el texto posterior no parece tener margen inferior.
Al reducir el tamaño de la fuente, el párrafo siguiente no se coloca al lado de la imagen, por lo que se puede asignar la propiedad clear a los párrafos <p>.
El texto del bloque pre fluye en varias líneas, lo que indica que se utiliza white-space con el valor pre-wrap
Al restablecer el estilo se pueden identificar las propiedades utilizadas:
El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio Emoticonos y abriendo el código fuente (Ctrl+U).
La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio Emoticonos.
Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir lo mismo, por lo que la solución no es nunca única.