Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Conceptos HTML y JavaScript Bloque 1 HTML
Conceptos HTML y JavaScript Bloque 1 HTML
y JavaScript
HTML
Bloque 1
HTML
Con HTML podemos “escribir” las páginas web. Es un lenguaje sencillo, en el que no hay variables, interpretado,
cuyas instrucciones reciben el nombre de etiquetas y permite escribir hipertexto (los elementos pueden ser
vinculado a otros elementos).
Es el lenguaje que se emplea en la World Wide Web para la visualización de páginas web.
Fácilmente, podemos ver el código fuente en HTML de una página pulsando Ctrl + U o inspeccionando
su contenido (Ctrl + Mayús + I).
Este lenguaje nos permite mostrar y estructurar la información, CSS nos permitirá aplicar diseños a
esta estructura y JavaScript añadir interactividad y responder a eventos, además de muchas otras
posibilidades.
¿Qué es el DOM?
El modelo de objetos del documento (DOM) es una interfaz de programación para los documentos HTML.
Es una representación de la estructura del documento, y define la forma en la que los programas pueden acceder
para manipularlo.
Con esta representación, podemos construir elementos, modificarlos, añadir interactividad,… En resumen, acceder
a toda la información de nuestro archivo HTML de forma externa, con cualquier tipo de lenguaje de programación.
Guarda además una gran similitud con la estructura del documento al que referencia.
Esto va a ser muy útil cuando trabajemos con JavaScript y CSS, podremos acceder a los elementos por medio de
los atributos que añadamos a las etiquetas, como pueden ser class o id.
Por ejemplo, con la función document.getElementById() podremos acceder desde un archivo JavaScript a aquellos
elementos que tengan como id el nombre que le pasemos.
… …
8 Editeca.com ® Todos los Derechos Reservados 2021
HTML
Atributos en HTML
Los atributos representan información adicional que podemos dar sobre los elementos HTML. Se definen siempre
en la etiqueta de inicio del elemento, y suelen venir con un par nombre-valor. Aquí vemos varios ejemplos:
• id: Especifica un identificador único para un elemento HTML. En CSS se leerá como #nombreId
• class: Indica el nombre de su clase correspondiente en una hoja de estilos, como puede ser un archivo CSS.
• href: Acompañando a la etiqueta <a>, define la URL a la que tiene que dirigirse el enlace.
Atributos en HTML
• width: Especifica el ancho de un recurso multimedia.
• height: Especifica la altura de un recurso multimedia.
• alt: Especifica un texto alternativo para un recurso multimedia, en caso de no poder ser mostrado.
• src: Especifica una ruta al elemento externo al archivo que debe ser cargado.
• style: Se usa para añadir estilos al elemento, como puede ser color, tamaño, posición,…
• title: Funciona como herramienta de información (tooltip), muestra un texto al pasar el ratón por encima del
elemento.
Eventos en HTML
Podemos usar los eventos como atributos. Estos eventos representan instantes en los que ocurre un determinado
procesos. Estos son algunos de ellos:
• onLoad: La página ha terminado de cargarse, se realiza sobre el body.
• onScroll: La página ha sido desplazada mediante un scroll.
• onSelect: El usuario ha seleccionado un texto de un campo de datos.
• onClick: Se ha pulsado un elemento, como puede ser un botón.
• onMouseEnter, onMouseLeave, onMouseOut,… : Definen movimientos del ratón sobre los distintos
elementos del documento.
• onInput: Detecta el cambio en un elemento <input>.
• onPlay, onLoadedData, onPause, onWaiting,… : Eventos para elementos multimedia.
• onError : Evento que se acciona cuando hay un error en la carga de un recurso.
La práctica debe ser entregada mediante Github, invitando al usuario RicardoCebriánGarcía a un repositorio creado
por el alumno.