La etiqueta script permite incluir código de Javascript en la página web. Se puede incluir un atributo src con el archivo que contiene el código, por ejemplo:
<script src="mi_archivo_utilidades.js"></script>
También se puede escribir directamente el código entre la etiqueta de inicio <script> y la de fin </script>, por ejemplo:
<script>document.getElementById("prueba").innerHTML = "Hola amigo!"; </script>
La etiqueta script puede ir en la cabecera y en el cuerpo de la página.
La etiqueta body engloba todo el cuerpo de la página web, el cuerpo contiene la información que verá el usuario, al contrario que la cabecera cuya información es para uso interno de la página web.
Todo el contenido de la página está entre el inicio de la etiqueta <body> y el fin de la etiqueta </body>
Si queremos que se ejecute una acción al cargarse la página podemos utilizar el evento onload, por ejemplo:
<body onLoad="aviso()">
Al cargarse la página se ejecutará el programa Javascrip "aviso()", en este curso no vamos a ver programación Javascrip ya que lo haría demasiado largo.
Vamos a explicar las partes del cuerpo de una página web sobre este esquema que ya vimos al principio de esta unidad,
Este es sólo un ejemplo de la estructura del cuerpo <body> ya que tenemos total libertad para utilizar las etiquetas que deseemos, y en el orden que prefiramos. De hecho, hasta la versión 5 de HTML no existían las etiquetas semánticas (section, article, ...) y las páginas se estructuraban utilizando los contenedores div, sin significado semántico. Todavía, actualmente (2019) muchas páginas no utilizan las etiquetas semánticas.
Por ejemplo, el siguiente fragmento de código del cuerpo de una página web que utiliza etiquetas semánticas, puede escribirse de forma equivalente sin utilizarlas como vemos en el párrafo más abajo:
<body> <header> Cabecera </header> <nav> Menú </nav> <main> <section> <h2> Cabecera de sección 1 </h2> <article> <h3> Cabecera del artículo 1 </h3> <div class="fondo_art_1"> <p> Primer párrafo del artículo 1 </p> <p> Segundo párrafo del artículo 1 </p> </div </article> </section> </main> <aside> <p> Publicidad </p> </aside> <footer> <p> ©Copyright 2018 aulaClic </p> </footer>
</body>
Utilizando contenedores div con clases podemos obtener el mismo resultado en cuanto a estructura y formato, aunque sin el componente semántico:
<body> <div class="cabecera"> Cabecera </div> <div class="navegar"> Menú </div> <div class="principal> < div class="secion"> <h2> Cabecera de sección 1 </h2> <div class="articulo"> <h3> Cabecera del artículo 1 </h3> <div class="fondo_art_1"> <p> Primer párrafo del artículo 1 </p> <p> Segundo párrafo del artículo 1 </p> </div </div> </div> </div> <div class="lateral"> <p> Publicidad </p> </div> <div class="pie"> <p> ©Copyright 2018 aulaClic </p> </div>
</body>
Sin embargo, es recomendable utilizar las etiquetas semánticas, por lo tanto, vamos a verlas con más detalle a continuación.
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.