Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Curso 2018/2019
1. Definición de HTML
El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico,
como el Bloc de notas de Windows, o cualquier otro editor que admita texto sin formato
como Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.
Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor
que (<>) y algunas tienen atributos que pueden tomar algún valor. En general las
etiquetas se aplicarán de dos formas especiales:
<!DOCTYPE HTML>
2 <html>
3 <head
4 <meta charset="utf-8" />
5 <title>Ejemplo1</title>
6 </head>
7 <body>
8 <p>Párrafo de ejemplo</p>
9 </body>
10 </html>
La versión HTML más reciente es el HTML5, que ha agregado una gran cantidad de
funciones adicionales al HTML original, que incluye un nuevo conjunto de etiquetas de
marca, además de que es compatible con dispositivos móviles.
2. Definición de HTML5
El HTML5 es el siguiente nivel del HTML que combina los componentes HTML, CSS
y JavaScript para crear una arquitectura más ágil. Añade etiquetas para manejar la Web
3.0: header, footer, article, nav, time (fecha del contenido), link rel=‘’ (tipo de contenido
que se enlaza).
Estas etiquetas permiten describir cuál es el significado del contenido. Por ejemplo, su
importancia, su finalidad y las relaciones que existen. No tienen especial impacto en la
visualización, se orientan a buscadores.
Los buscadores podrán indexar e interpretar esta meta información para no buscar
simplemente apariciones de palabras en el texto de la página. Asimismo, permite
incorporar a las páginas ficheros RDF / OWL (con meta información) para describir
relaciones entre los términos utilizados. Ofrece, también, versatilidad en el manejo y
animación de objetos simples, imágenes etc.
3. Diferencias entre HTML y HTML5
Otra de las diferencias entre los dos es que HTML5 es muy fácil de usar en dispositivos
móviles, lo que significa que tiene un soporte excepcional para el desarrollo móvil, que
se aplica bien con un diseño receptivo y es comprendido por los principales
navegadores web móvil, como Opera Mobile, Safari, Chrome y más.
HTML5 facilita a los desarrolladores la creación de una versión móvil de un sitio web.
HTML no permite que JavaScript se ejecute en el navegador, mientras que HTML5
permite que JavaScript se ejecute en segundo plano.
Para la actividad de esta asignatura, se pide la realización de una página HTML5 que
contenga texto, video, audio con enlace a tres o cuatro páginas. Para ello comienzo con
la elección de un editor de texto. En mi caso, utilizaré Sublime Text y una vez abierto el
programa copio y pego lo siguiente:
<html>
<head>
<title>My first website</title>
</head>
<body>
</body>
<html>
Una vez copiado, guardo el archivo con la extensión “.html”. En mi Macintosh, Sublime
Tex facilita la opción de guardar como “página web” y no es necesario cambiar
manualmente la extensión del archivo de texto.
Una vez realizado este proceso, he comprobado cómo se visualizaría el primer boceto,
por lo que pincho en el archivo y lo abro con Google Chrome. Observo que no se
muestra todo lo que he escrito en Sublime Text. Asimismo, compruebo que todo lo que
aparece entre los signos < y > no se muestra. Esos signos marcan una etiqueta de
HTML, y todas las que he utilizado siguen el formato <etiqueta>contenido</etiqueta>.
Todo el contenido de mi página web debe estar incluido dentro de la etiqueta <html>
</html>. No obstante, es conveniente especificar un atributo que indique el lenguaje o
idioma con el que está escrita la página web. Ya que el contenido está en inglés, añadiré
lang=“en”.
Dentro de mi página diferencio dos partes: la cabecera, marcada con <head> </head>
y el cuerpo <body></body>. En la cabecera, pueden ir muchas etiquetas necesarias,
pero que no forman parte del contenido y estas se llaman etiquetas auxiliares. He
añadido la etiqueta y el atributo <meta charset="utf-8"> que indica el sistema de
codificación con el que está escrita la página. En la cabecera también se incluirán los
enlaces a los archivos con hojas de estilo CSS. Para crear un link a mi página de CSS,
he añadido <link rel="stylesheet" type="tex/css" href=estilos.css /> que hace referencia
a la hoja de estilo que he creado. Del mismo modo, la cabecera también contiene el
título de la página que aparecerá en la solapa del navegador.
<li><a href="poems.html">Phases</a></li>.
La etiqueta <ul> viene de la mano de <li>, etiqueta que la define y que he usado en esta
parte. A continuación, he añadido la etiqueta <a>, que define un hipervínculo y que se
utiliza para enlazar de una página a otra. El atributo más importante del elemento <a> es
el atributo href, que indica el destino del enlace. Yo he abierto cuatro, para los cuatro
apartados. Asimismo, he creado previamente esas subpáginas añadiéndole un nombre,
una extensión html y las he guardado en una misma carpeta, por lo que al abrir la página
de inicio en cualquier explorador se accede a las misma fácilmente. Por otro lado, he
añadido a cada una de las subpáginas un link para acceder a la siguiente en el orden
elegido, de la misma manera en la que he enlazado las otras páginas; usando la etiqueta
a href=. Ejemplo: <a href="video.html" class="button">Neither with nor without
you</a>
He agrupado mis poemas en un sistema de rejillas y para ello he usado etiquetas divs,
que define un bloque donde se incluye la información dentro de la página. En concreto,
para el sistema de rejillas he usado class=“master-grid” y dentro estarán los poemas
entre las etiquetas <div class='container'>. El título del poema está colocado entre las
etiquetas <h3>, ya que previamente he utilizado <h1></h1> y <h2></h2> para marcar
la importancia de cada texto. Los versos han sido estructurados entre la etiqueta
<p></p>, que indica párrafo y <br> para el salto de línea en el texto. Las siguientes
páginas de audio y video han sido estructuradas de la misma forma. En concreto en el
vídeo, he añadido dos posibles versiones (mp4 y ogv) por si alguno de los navegadores
no lee uno u otro. Por lo demás, no he experimentado ningún problema en cuanto a la
lectura de mi página web en otros navegadores, únicamente en Safari, donde el audio no
se reproduce.
En la página de estilos he definido el color del fondo, la letra, los márgenes de cada
una de las etiquetas y atributos que he utilizado. Como he creado más de una página, el
objetivo de la página CSS es tener centralizado en un solo espacio todo el formato de mi
página web. De esta forma, puedo cambiar el contenido de muchas páginas webs desde
un solo lugar. En el archivo adjuntado se encontrarán el archivo HTML y la hoja de
estilo y los archivos de audio y vídeo más las actividades.