Scribd
Cargar
87 vistas

Conceptos HTML y JavaScript Bloque 1 HTML

Cargado por

Prof. Emilia Rodríguez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
87 vistas

Conceptos HTML y JavaScript Bloque 1 HTML

Cargado por

Prof. Emilia Rodríguez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 18

Conceptos HTML

y JavaScript
HTML

Bloque 1
HTML

Contenido del bloque 1


1. ¿Qué es HTML y para qué sirve?
2. ¿Cómo son los elementos HTML?
3. Estructura básica del archivo HTML.
4. ¿Qué es el DOM?
5. Atributos en HTML.
6. Etiquetas más relevantes para texto.
7. Etiquetas más relevantes para estructurar el contenido.
8. Etiquetas más relevantes para incrustar contenido
9. Etiquetas más relevantes para crear tablas.
10. Etiquetas más relevante para crear formularios.
11. Eventos en HTML
3 Editeca.com ® Todos los Derechos Reservados 2021
HTML

¿Qué es el HTML y para qué sirve?


El HTML (HyperText Markup Language) es un lenguaje de etiquetas para la elaboración de aplicaciones web. Es
un estándar que especifica la estructura lógica del contenido, además de ciertos efectos que se quieran dar.

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.

4 Editeca.com ® Todos los Derechos Reservados 2021


HTML

¿Cómo son los elementos HTML?


Al ser un lenguaje de marcado, los elementos HTML tienen etiquetas que dan información al navegador sobre
como mostrar el contenido. Estas etiquetas tienen la siguiente estructura:
• El símbolo “menor qué” <.
• Una palabra que define qué tipo de etiqueta se está utilizando.
• Atributos HTML que se quieran añadir al contenido, tales como estilo, identificador, clase, …
• El carácter “mayor qué” >.
• El contenido, que es lo que se muestra realmente.
• En muchos casos, también será necesario cerrar el contenido referente a esa etiqueta, mediante
</nombreEtiquetaUtilizada>.

5 Editeca.com ® Todos los Derechos Reservados 2021


HTML

Estructura básica del archivo HTML


• <!DOCTYPE html>: Define el tipo de documento
• <html lang=“es”></html>: Delimita el contenido del documento HTML, el atributo “Lang” define el
lenguaje del contenido del código
• <head></head>: La cabecera del documento, que contiene información sobre metadatos, scripts, hojas de
estilo, ubicación de documentos, título de la página,…
• <meta>: Estas etiquetas os permiten identificar propiedades del documento, como autor, título,
descripción, codificación del documento,…
• <style></style>: Para definir código CSS.
• <link href=“ ”>: Nos ofrece un enlace a elementos externos a nuestro documento, como hojas de estilo. El
atributo href nos indica la ubicación del elemento externo.
• <body></body>: Delimita el cuerpo del documento, es todo aquello que podremos ver desde nuestro
navegador

6 Editeca.com ® Todos los Derechos Reservados 2021


HTML

¿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.

7 Editeca.com ® Todos los Derechos Reservados 2021


HTML

Ejemplo de DOM básico

… …
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.

9 Editeca.com ® Todos los Derechos Reservados 2021


HTML

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.

10 Editeca.com ® Todos los Derechos Reservados 2021


HTML

Etiquetas más relevantes para texto


• <span> </span>: Etiqueta HTML sin ningún significado específico. Se usa conjuntamente con los atributos
«class» o «id» para atribuirle ciertas características.
• <br>: Etiqueta utilizada para crear un salto de línea
• <a> </a>: Etiqueta utilizada para crear hiperenlaces en el documento HTML
• <strong> </strong>: Etiqueta para definir una palabra o conjunto de ellas como importantes. Tiene una fuerte
importancia en el SEO de la página.
• <small> </small>: Utilizada para dejar un comentario aparte, del tipo una nota de derechos de autoría, u otros
textos que no son esenciales para la comprensión del documento.
• <cite> </cite>: Para indicar el título de una obra o una cita.
• <sub> </sub> y <sup> </sup>: Etiquetas utilizadas para representar un subíndice o superíndice.
• <mark> </mark>: Usada para resaltar texto

11 Editeca.com ® Todos los Derechos Reservados 2021


HTML

Etiquetas más relevantes para estructurar el contenido


• <div> </div>: Etiqueta común utilizada para crear un contenedor genérico.
• <p> </p>: Etiqueta usada para escribir párrafos de texto.
• <blockquote> </blockquote>: Se usan para indicar que el contenido es texto citado.
• <ol> </ol>: Etiquetas para crear una lista ordenada
• <ul> </ul>: Etiquetas para crear una lista desordenada
• <li> </li>: Etiquetas que recogen el contenido de un elemento de una lista, sea ordenada o no.
• <dl> </dl>: Usada para crear una lista de definiciones.
• <dt> </dt>: Representa un término definido por la siguiente etiqueta <dd>
• <dd> </dd>: Se usa para definir los términos listados antes que él.
• <hr>: Etiqueta utilizada para «romper» entre dos secciones de una web. Usada comúnmente como separador.
• <figure> </figure>: Indica una figura ilustrada como parte del documento HTML5.
• <figcaption> </figcaption>: Utilizada para definir la leyenda de una figura.

12 Editeca.com ® Todos los Derechos Reservados 2021


HTML

Etiquetas más relevantes para incrustar contenido


• <img>: Etiqueta para insertar una imagen en la página web.
• <video> </video>: Se usa para reproducir video en la página web.
• <audio> </audio>: Usada para cargar un archivo de audio o stream de audio.
• <source>: Permite a autores especificar recursos multimedia alternativos para las etiquetas de <video> o
<audio>.
• <iframe> </iframe>: Es una etiqueta que sirve para anidar otro documento HTML dentro del documento
principal.
• <embed>: Usada para integrar una aplicación o contenido interactivo externo que no suele ser HTML.
• <object> </object>: Utilizada llamar a un recurso externo de la web. Este recurso será tratado como una
imagen, o un recurso externo para ser procesado por un plugin.
• <svg> </svg>: Se usa para insertar una imagen vectorizada.

13 Editeca.com ® Todos los Derechos Reservados 2021


HTML

Etiquetas más relevantes para crear tablas


• <table> </table>: Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la tabla han de ir siempre
recogidas entre estas dos etiquetas.
• <th> </th>: Etiqueta que se usa para definir el encabezado de una celda
• <tr> </tr>: Se usa para indicar una fila de celdas de una tabla.
• <td> </td>: Usada para definir una celda de una tabla.
• <caption> </caption>: Usada para indicar el título de la tabla.
• <colgroup> </colgroup>: Etiqueta utilizada para agrupar dos o más columnas de una tabla.
• <thead> </thead>: Indica bloques de filas que describen las etiquetas de las columnas de la tabla.
• <tbody> </tbody>: Usada para describir los datos concretos de una tabla.
• <tfoot> </tfoot>: Indica los bloques de filas que describen los resúmenes, o datos totales de una columna de
una tabla.

14 Editeca.com ® Todos los Derechos Reservados 2021


HTML

Etiquetas más relevantes para crear formularios


• <form> </form>: Etiqueta de apertura y cierre de un formulario de una página web. El resto de etiquetas de
formulario deben ir siempre recogidas entre estas etiquetas de apertura y cierre de formulario.
• <fieldset> </fieldset>: Etiqueta que representa un conjunto o agrupación de elementos de un formulario.
«Pinta» un recuadro alrededor de las etiquetas que estén contenidas dentro del <fieldset>
• <legend> </legend>: Etiqueta ligada a <fieldset>. Indica el título del <fieldset>
• <label> </label>: Se usa para definir el nombre o título de un control del formulario.
• <input> Añade un campo de introducción de datos para el usuario. Es de las principales etiquetas de un
formulario.
• <button> </button>: Etiqueta utilizada para representar un botón en el formulario.
• <select> </select>: Input que permite una selección entre un conjunto de opciones.
• <option> </option>: Etiqueta ligada a <select>. Permite añadir diferentes opciones al <select>
• <textarea> </textarea>: Añade un campo al usuario para que pueda introducir texto en unas líneas máximas de
texto que el desarrollador puede definir.

15 Editeca.com ® Todos los Derechos Reservados 2021


HTML

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.

16 Editeca.com ® Todos los Derechos Reservados 2021


HTML

Ejercicio final del bloque 1


Se debe crear un proyecto, que contenga al menos los archivos index.html, styles.css y main.js, en el que se
desarrolle en HTML una página web personal o comercial. Al menos debe tener lo siguiente:
• Una sección dedicada a una barra de navegación, una tabla, un elemento externo incrustado, un formulario,
algún elemento multimedia y la combinación de varios de los elementos vistos en el tema.
• Los elementos deben tener asociados atributos según sea su naturaleza.
• Debe existir algún enlace, aunque su ruta se encuentre vacía.
• Deben existir comentarios.
• Se valorará cada herramienta adicional de la que se haga uso, como puede ser algún estilo sencillo parecido a
los que hemos visto o la inclusión de algún evento, aunque no realice ninguna acción.

La práctica debe ser entregada mediante Github, invitando al usuario RicardoCebriánGarcía a un repositorio creado
por el alumno.

17 Editeca.com ® Todos los Derechos Reservados 2021


Gracias

También podría gustarte