UD2 - Utilización de Lenguajes de Marcas en Entornos Web

Lenguajes de Marcas y Sistemas de
Gestión de Información
1º DAM-DAW-ASIR - Tres Cantos
Curso 2023-2024
UD 2 Utilización de lenguajes de
marcas en entornos web
Marlene Arangú
Contenido
1. Introducción
2. Identificación de etiquetas y atributos de HTML
3 LDM
Introducción Historia
4 LDM
Introducción
Historia
https://www.w3.org/standards/history/html5
5 LDM
Estructura del documento HTML
<!declaración de tipo de documento>
Una página web es la interpretación que
realiza el navegador de un documento web.
• Texto plano delimitado por una etiqueta

de apertura <html> y de cierre </html>
• Las etiquetas <head> y </head>

delimitan la cabecera.
• Las etiquetas <body> y </body>

delimitan el cuerpo.
6 LDM
Elementos de HTML
7 LDM
Elementos de HTML
8 LDM
Elementos de HTML
Los elementos pueden tener atributos y contenido
9 LDM
Elementos de HTML
10 LDM
Elementos de HTML
11 LDM
Elementos de HTML
12 LDM
Elementos de HTML
13 LDM
Elementos de HTML
14 LDM
Contenido de la Cabecera
15 LDM
16 LDM
17 LDM
18 LDM
https://imagen.online-convert.com/es/convertir-a-ico
https://favicon.io/
19 LDM
20 LDM
21 LDM
22 LDM
23 LDM
Contenido del Cuerpo
En HTML la mayoría de elementos del cuerpo se pueden clasificar en:
• Elementos de bloque: son elementos que crean estructuras más grandes que
pueden contener a los elementos de línea y a otros elementos de bloque. Estos
elementos siempre comienzan en una línea nueva.
• Elementos de línea: Estos elementos sólo pueden contener datos y a otros

elementos de línea. No comienzan con una línea nueva.
24 LDM
25 LDM
26 LDM
27 LDM
28 LDM
29 LDM
30 LDM
31 LDM
32 LDM
33 LDM
34 LDM
35 LDM
36 LDM
37 LDM
Manejo de listas
Listas no ordenadas <ul> <li>

Listas de
elementos Listas ordenadas <ol> <li>
Listas
Listas de
<dl> <dt> <dd>
definiciones
38 LDM
39 LDM
40 LDM
41 LDM
(Solución)
42 LDM
Cambiando la numeración de la lista ordenada. Atributo type
<ol type=“tipoNumerción” Ejemplo

Sean los momentos del día:
<ol> mañana
Tarde
noche
<ol type="I">
<ol type="i">
<ol type="a">
<ol type=“A">
43 LDM
44 LDM
Solución
45 LDM
46 LDM
47 LDM
(Solución)
48 LDM
49 LDM
50 LDM
Solución
51 LDM
52 LDM
53 LDM
54 LDM
55 LDM
Ejemplo: Elemento origen apunta a destino en la misma página
Con atributo id
Con atributo name
56 LDM
Enlace interno: <a href=“#valor”>
Solución
Etiqueta de enlace
¿qué
diferencias
encuentras
entre los
Con atributo name atributos
name e id?
Con atributo id
57 LDM
Ejemplo: Elemento origen apunta a destino en una página alojada en el mismo servidor
Colocar en la lista todas las páginas realizadas
58 LDM
Enlace Externo mismo servidor: <a href=“./pagina#valor”>
Solución
59 LDM
Ejemplo: Elemento origen apunta a destino en otra página de otro servidor, y se abre en la misma página
60 LDM
Enlace a una página externa <a href=“dirección_http”>
Solución
61 LDM
Ejemplo: Elemento origen apunta a destino en otra página de otro servidor y se abre en una nueva pestaña
62 LDM
Enlace a una página externa y abre en una nueva página <a href=“dirección_http” target=“_blank”>
Solución
Agrega este atributo

para que el enlace se
abra en una página
nueva
63 LDM
Imágenes: Los formatos aceptados por la mayoría de ordenadores son:
jpg gif png
• Adecuado para fotos • Adecuado para dibujos • Adecuado en general

• Compresión con • Compresión sin pérdida • Compresión sin pérdida
pérdida • 256 colores • Millones de colores
• Conserva el color • Permite transparencia • Permite transparencia
original • Permite animación • Permite metadatos
• 16 Millones de colores • No degrada el color • Editable
• Permite modo • Tiene derechos de • Es más pesado
progresivo de aparición autor • No permite animación
• No permite
transparencia
• No permite animación
64 LDM
Imágenes:
20 KB 23 KB 96 KB
65 LDM
Imágenes: <img>
Definición Sirve para insertar la imagen determinada por el atributo src

Es un elemento de línea
Aparición Sin etiqueta de cierre
Atributos %attrs, src, alt, longdesc, name, height, width, usemap,ismap
src: Indica la URI de acceso a la imagen
alt: texto con breve descripción de la imagen, que se presenta en caso
de no poder visualizarla
longdesc: URI de una descripción larga de la imagen
name: Identifica la imagen para su manejo posterior en hoja de estilo
height: establece altura
width: establece el ancho
usemap: sirve para asociar la imagen a un mapa de imágenes
ismap: sirve para definir un mapa de imágenes
Atributos hspace,vspace, align, border
desaprobados
66 LDM
Crear Gif animados:
https://giphy.com/
67 LDM
Solución
68 LDM
Mapa de imágenes : Con los mapas de imágenes HTML, se coloca una capa donde
se pueden crear áreas (circulares, rectangulares o poliédricas) en las que se puede
hacer clic en el lado del cliente, permitiendo hacer enlaces a páginas especificadas por
el usuario.
69 LDM
Mapa de imágenes
70 LDM
Mapa de imágenes : Con los mapas de imágenes HTML, se coloca una capa en
una imagen donde se pueden crear áreas (circulares, rectangulares o poliédricas) en
las que se puede hacer clic en el lado del cliente, permitiendo hacer enlaces a páginas
especificadas por el usuario.
Mapa: <map>
Definición Permite crear un mapa de imágenes
Es un elemento de bloque y de línea
Aparición Etiqueta inicial y final obligatorias
Atributos %attrs, name
name: Indica el nombre del mapa
71 LDM
Área: <area>
Definición Especifica cada una de las áreas del mapa de imágenes que es interactiva
Aparición Sin etiqueta final
Atributos %attrs, shape, coords, href, alt, target, title
shape: especifica la forma del área: default |rect | circle | poly

coords: Indica la posición de la pantalla o coordenadas (x,y) donde se encuentran las
figuras. Depende del shape (forma de la figura):
• Si es un círculo las coordenadas serán 3: coordenadas (x,y) del centro y radio (valor)
• Si es un cuadrado serán 4: coordenadas (x,y) vértice superior izquierdo, (x,y) vértice
inferior derecho
• Si es un polígono, irá por puntos: coordenadas (x,y) primer punto, (x1,y1) segundo
punto, (x2,y2) tercer punto.
href: URL a la que se accede al hacer clic sobre el área
alt: texto alternativo si la imagen no puede ser mostrada
target: _blank (permite abrir el enlace en una nueva página/pestaña); _self (abre el
enlace en mismo frame donde fue pulsado
title: Muestra un rótulo de texto al posicionar el ratón sobre el área seleccionada.
72
Área: <area> …
shape forma coordenadas coords
4 puntos:
Tipos de shape
rect rectangular esq. superior y 20,18,166,232

esq. inferior
3 puntos: centro y
circle circular 252,82,62
radio
253,160,294,187,
Tantos como precisión
poly poliédrica 278,235,224,234,209,
se quiera
187
¿de dónde obtengo los valores de las coordenadas?
73
Área: <area> …
74
Área: <area>…
75
Mapa de imágenes…
Contenido del Cuerpo http://www.image-map.net/
Mapa de imágenes…
77
Cada zona debe mostrar un texto al colocar el puntero del
Mapa de imágenes… Mouse sobre ella y al hacer clic abrirse en una nueva página
Lugar shape href

Madrid poly https://www.madrid.es/portal/site/munimadrid
Valencia poly https://www.valencia.es/
Islas
Canarias https://es.wikipedia.org/wiki/Canarias
Mallorca https://es.wikipedia.org/wiki/Mallorca
??? poly Una comunidad al norte de España.

Busca tu el enlace
78 LDM
Formularios: Documento con elementos o áreas de entrada de información.
Permiten introducir datos, marcar opciones, elegir una opción de un grupo,…
<form>
Definición Permite insertar un formulario en un documento. Elemento de bloque.
Atributos %attrs, action, method, enctype, accept, accept-charset, name, target, onsubmit,
onreset
action: URI del programa encargado de gestionar los datos del formulario.
method: (get o post) indica el método usado para pasar los datos al programa.
enctype: (solo si el método es post) tipo de contenido usado para enviar los datos
accept: lista de tipos de contenidos aceptados por el servidor
accept-charset: codificación de caracteres usada para los datos.
onsubmit: sirve para ejecutar alguna acción cuando el formulario es enviado
onreset: sirve para realizar alguna acción cuando el formulario es reseteado.
79
Formularios: <form>
80
Formularios: <form>
Elementos que puede contener el formulario
<input>
<button>
<select>
<option>
<optgroup>
<textarea>
81
Formularios: Permiten que el usuario pueda mandar datos al servidor web. Los
elementos de entrada de información se denominan controles del formulario.
<input>
Definición Sirve para insertar un elemento definido por type dentro del formulario.
Aparición Sin etiqueta de cierre
Atributos %attrs, type, name, value, size, maxlength, checked, src, alt, disabled, readonly,
usemap, ismap, tabindex, acceskey, onfocus, onblur, onselect, onchange,
accept
type: Tipo de control del formulario para recoger datos.

(text, password, checkbox, radio, submit, reset, file, hidden, image, button)
name: nombre del control.
checked: marca la casilla para un control de tipo checkbox o radio.
accept: lista de tipod mime válidos para subir ficheros.
value: valor por defecto, texto que aparece inicialmente.
82
Formularios: Ejemplo de <input type="text" …>
Este control tiene el valor por defecto de Nombre y está identificado por el nombre
usuario para su tratamiento posterior (la variable que almacena el texto introducido
se llama usuario).
83
Formularios: Ejemplo de <input type="password"…. >
Este control no mostrará el texto introducido por el usuario, mostrará un punto por
cada carácter introducido. Está identificado por el nombre pass para su posterior
tratamiento
84
Formularios: Ejemplo <input type="checkbox"….>
Este control muestra una casilla para poder seleccionarla con un clic. En este caso aparece
ya seleccionada por el atributo checked. Está identificado por esSocio ya que el valor será
cierto si se ha seleccionado o falso si se deselecciona.
85
Formularios: Ejemplo <input type="radio"….> excluyente
La información de sexo del usuario se selecciona mediante dos casillas, como ambos están
identificados por la misma variable, genero, por lo que serán excluyentes… Aquí también, el
atributo checked en una de ellas la preselecciona
86
Formularios: Ejemplo <input type="radio"….> multievaluado
Los temas preferidos por el usuario pueden ser varios por lo que se permitirá seleccionar
varias de las casillas, así, cada una de ellas debe tener un identificador diferente. Aquí no
tiene mucho sentido el atributo checked.
87
Formularios: Ejemplo <input … readonly> solo lectura
Valor que se enviará al servidor pero que el usuario no puede modificar. En este caso el
campo de texto se ha hecho más pequeño por cuestión estética
88
Formularios: Ejemplo <input type="file" …> envía archivos
Este control inserta un botón para realizar una búsqueda en el disco del fichero que se
enviará con el formulario al servidor.
Hay que definir el atributo enctype en la etiqueta del formulario.
89
Formularios: Ejemplo <input type="hidden"/"submit"/"reset"/"button" >
El control de tipo hidden no se ve en el formulario

El control de tipo submit envía los datos al servidor, a la URI especificada en action.
El control de tipo reset recupera los valores por defecto de todos los controles.
El control de tipo button define un botón genérico, para asociar una determinada
acción con un script.
90
Formularios:
<button >
Definición Sirve para insertar un botón como los creados por input pero con más formato.
Atributos %attrs, type, name, value, disabled, tabindex, acceskey, onfocus, onblur
type: Indica el tipo de función del botón. (submit, reset, button)

Formularios: Ejemplo <button … >
Al pulsar el botón salir….

How to close a browser window with HTML https://www.computerhope.com/issues/ch000178.htm
92
Formularios: Ejemplo <button … > personalizados
Las funciones de los botones son las mismas, simplemente cambia la estética y el
hecho de que sean botones más personales
93
Formularios:
Menú <select>
Definición Sirve para insertar un menú de formulario con varias opciones.

Atributos %attrs, name, size, multiple, disabled, tabindex, onfocus, onblur, onchange
size: Número de filas del menú que se ven al mismo tiempo

multiple: permite una selección múltiple de opciones
Formularios: Menú <select> …
<option>
Definición Sirve para indicar cada opción del menú de formulario.
Atributos %attrs, selected, disabled, label, value
selected: Indica que la opción del menú está preseleccionada

label: Rotulo para la opción del menú
<optgroup>
Definición Sirve para definir un grupo de opciones.

Atributos %attrs, disabled, label
Formularios: Ejemplo <select … >
96
Formularios:
Cuadro de entrada de texto multilínea <texarea>
Definición Sirve para insertar un cuadro de entrada de texto con muchas líneas.
Atributos %attrs, name, rows, cols, disabled, readonly, tabindex, acceskey, onfocus,
onblur, onselect, onchange
rows: Indica el número de líneas visibles

cols: Indica el ancho del cuadro de caracteres
Formularios: Ejemplo < textarea >
98
Formularios:
Etiqueta <label>
Definición Sirve para asignar un título a un control.

Atributos %attrs, for, acceskey, onfocus, onblur
for: Especifica el nombre de otro control para el que servirá de rótulo

(coincide con el id del control relacionado)
Formularios: Ejemplo < label >
100
Formularios:
<fieldset>
Definición Sirve para agrupar los controles y sus títulos por temas.
Atributos %attrs
<legend>
Definición Sirve para asignar un rótulo a un fieldset.
Atributos %attrs, acceskey
Formularios: Ejemplo <fieldset> <legend>
102
Formularios:
Tablas:
• Utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se
utilizan en cualquier otro entorno
• Pueden contener elementos simples, agrupaciones de filas y de columnas,

cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos
complejos
• No siempre se utilizan adecuadamente

Tablas:
• Al interpretar una tabla, el navegador la Etiqueta Descripción

muestra conforme va leyendo las Etiqueta contenedora de la cabecera
<thead> de la tabla. Parte superior de la tabla.
etiquetas, por lo que se crea en el orden
que se han especificado sus elementos,
Etiqueta contenedora del cuerpo de la
de arriba a abajo.
<tbody> tabla. Parte central de la tabla.
• Se pueden utilizar una serie de etiquetas

Etiqueta contenedora del pie de la
contenedoras que establecerán la zona
<tfoot> tabla. Parte inferior de la tabla.
de la tabla donde deben aparecer su Establece un título de la tabla,

<caption> independientemente de su posición.
contenido
Tablas:
Etiqueta Descripción
<table> Etiqueta que contendrá la tabla
<tr> Table Row. Etiqueta contenedora de cada fila de la tabla
<td> Table Data. Cada una de las celdas de datos de la tabla
<th> Table Header. Cada una de las celdas de cabecera de la

tabla
Tablas:
Colocar dentro del <head>

<style>
table, th, td {
border:1px solid black;
}
</style>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
Tablas: combinar celdas
Atributo Valor Descripción

colspan número Número de columnas que la celda
abarcará
rowspan número Número de filas que la celda abarcará
headers ids Id de los elementos <th> con los que

tiene relación la celda
scope (th) row La cabecera se aplica a alguna de las filas

adyacentes
col La cabecera se aplica a alguna de las

columnas adyacentes
rowgroup La cabecera se aplica a todas las celdas

restantes de la fila
colgroup La cabecera se aplica a todas las celdas

restantes de la columna
auto La cabecera se aplica a las celdas de

forma automática
abbr (th) nombre Abreviatura o información alternativa

sobre la cabecera
Tablas:
text-align: center;
Formularios &Tablas
Tablas con imágenes
Tablas con datos.
Bloques de contenido <div>
La etiqueta <div> proporciona sentido organizativo al contenido de una página web,

separando en bloques cada parte.
Definición Sirve para crear secciones o agrupar contenidos. Crea una caja.
Puede contener texto, cero o más elementos en bloque y en línea
Atributos title, id, class, style, lang, dir
id: Le da un nombre al elemento que lo diferencia de todos los demás

del documento
class: Asigna nombres de clases al elemento. Por defecto, clases CSS
title: Texto informativo o título del elemento. Suele mostrarse a modo de
"tool tip".
lang: Información sobre el idioma del contenido del elemento y del
valor de sus atributos.
style: Permite especificar información de estilo. Por defecto, estilos CSS.
dir: Indica la dirección del texto ‘ltr’ o ‘rtl’ .
Contenedor en línea <span>
La etiqueta <span> proporciona sentido organizativo al contenido de bloques

de texto y elementos similares.
Definición Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar

elementos en línea. Crea una caja en línea. Puede contener texto y/o
elementos en línea
Atributos title, id, class, style, lang, dir
id: Le da un nombre al elemento que lo diferencia de todos los demás

del documento
class: Asigna nombres de clases al elemento. Por defecto, clases CSS
title: Texto informativo o título del elemento. Suele mostrarse a modo de
"tool tip".
lang: Información sobre el idioma del contenido del elemento y del
valor de sus atributos.
style: Permite especificar información de estilo. Por defecto, estilos CSS
dir: Indica la dirección del texto ‘ltr’ o ‘rtl’ .
Bloques de contenido <div> & <span>
Bloques
de
contenido
<div>
Bloques
de
contenido
<div>
Bloques
de Utilizando los elementos de
contenido flotación podemos ubicar el
<div> bloque a la izquierda (left),
derecha (right), centrarlo
(center) o justificarlo (justify).
XHTML
XHTML
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5

UD2 - Utilización de Lenguajes de Marcas en Entornos Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

UD2 - Utilización de Lenguajes de Marcas en Entornos Web

Cargado por

Copyright:

Formatos disponibles

Lenguajes de Marcas y Sistemas de

• Texto plano delimitado por una etiqueta

• Las etiquetas <head> y </head>

• Las etiquetas <body> y </body>

Los elementos pueden tener atributos y contenido

En HTML la mayoría de elementos del cuerpo se pueden clasificar en:

• Elementos de línea: Estos elementos sólo pueden contener datos y a otros

Listas no ordenadas <ul> <li>

<ol type=“tipoNumerción” Ejemplo

Colocar en la lista todas las páginas realizadas

Agrega este atributo

jpg gif png

• Adecuado para fotos • Adecuado para dibujos • Adecuado en general

Definición Sirve para insertar la imagen determinada por el atributo src

Crear Gif animados:

shape: especifica la forma del área: default |rect | circle | poly

rect rectangular esq. superior y 20,18,166,232

¿de dónde obtengo los valores de las coordenadas?

Lugar shape href

??? poly Una comunidad al norte de España.

Elementos que puede contener el formulario

type: Tipo de control del formulario para recoger datos.

Hay que definir el atributo enctype en la etiqueta del formulario.

El control de tipo hidden no se ve en el formulario

type: Indica el tipo de función del botón. (submit, reset, button)

Al pulsar el botón salir….

Definición Sirve para insertar un menú de formulario con varias opciones.

size: Número de filas del menú que se ven al mismo tiempo

selected: Indica que la opción del menú está preseleccionada

Definición Sirve para definir un grupo de opciones.

Cuadro de entrada de texto multilínea <texarea>

rows: Indica el número de líneas visibles

Definición Sirve para asignar un título a un control.

for: Especifica el nombre de otro control para el que servirá de rótulo

• Pueden contener elementos simples, agrupaciones de filas y de columnas,

• No siempre se utilizan adecuadamente

• Al interpretar una tabla, el navegador la Etiqueta Descripción

• Se pueden utilizar una serie de etiquetas

de la tabla donde deben aparecer su Establece un título de la tabla,

<table> Etiqueta que contendrá la tabla

<tr> Table Row. Etiqueta contenedora de cada fila de la tabla

<td> Table Data. Cada una de las celdas de datos de la tabla

<th> Table Header. Cada una de las celdas de cabecera de la

Colocar dentro del <head>

Atributo Valor Descripción

rowspan número Número de filas que la celda abarcará

headers ids Id de los elementos <th> con los que

scope (th) row La cabecera se aplica a alguna de las filas

col La cabecera se aplica a alguna de las

rowgroup La cabecera se aplica a todas las celdas

colgroup La cabecera se aplica a todas las celdas

auto La cabecera se aplica a las celdas de

abbr (th) nombre Abreviatura o información alternativa

La etiqueta <div> proporciona sentido organizativo al contenido de una página web,

id: Le da un nombre al elemento que lo diferencia de todos los demás

La etiqueta <span> proporciona sentido organizativo al contenido de bloques

Definición Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar

id: Le da un nombre al elemento que lo diferencia de todos los demás

También podría gustarte