UD2 - Uso lenguajes de marcas

(1)

UD2 - Uso lenguajes de marcas

en entorno web. HTML

(2)

Índice

1. Introducción HTML. 1.1. Características. 1.2. Estructura.

2. Etiquetas, elementos y atributos. 2.1. Etiquetas. 2.1. Etiquetas. 2.2. Elementos. 2.3. Atributos. 3. Formularios. 4. Introducción a XHTML. 4.1. Sintaxis y versiones. 4.4. Diferencias con HTML. 2

(3)

Introducción HTML

1 Introducción HTML

(4)

Características

1.1 SGML es complejo, surge HTML

(Hyper Text Markup Language), más simple y adaptado a

mostrar contenido en la web.

◉

Distribuido: La información está repartida en páginas sin mucha información.

◉

Navegación fácil.

1. Introducción HTML

◉

Navegación fácil.

◉

Compatible con cualquier ordenador y sistema operativo.

◉

Dinámico: es fácil y rápido cambiar y actualizar la información.

4

Lenguaje encargado de convertir un inocente archivo de texto inicial en una página web

con diferentes tipos y tama

ñ

os de letra, con imágenes impactantes, animaciones

sorprendentes, formularios interactivos, etc.

(5)

Estructura

1.2

<!DOCTYPE HTML>

1. Características HTML

Todo documento HTML está formado por tres partes:

1. Declaración de la versión HTML con la que se ha creado el documento.

2. Cabecera con información sobre el documento.

1

<html>

<head>

<title>Mi primera página WEB</title> </head>

<body>

Contenido de mi primera página en html. </body>

</html>

2. Cabecera con información sobre el documento.

3. Cuerpo con el contenido real del documento.

2

3

<html></html>

Etiquetas de inicio y fin,

todo el contenido debe estar dentro de

estas dos etiquetas.

(6)

Estructura

–

Declaración de la versión

1.2 1. Características HTML

En HTML 4 la declaración depende de la DTD a la que se ajustan

DTD

Scrict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Incluye todos los elementos y

atributos que no han sido

DTD Establece las reglas de formación del lenguaje forma, es decir, quécombinaciones de símbolos elementales son sintácticamente correctas. 6 Scrict "http://www.w3.org/TR/html4/strict.dtd">

declarados (desaprobados).

Transacional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Incluye todos los elementos y

atributos desaprobados.

Marcos <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" http://www.w3.org/TR/REC-html40/frameset.dtd>

Transicional más lo relativo a la

creación de documentos con

marcos.

(7)

Estructura

–

Declaración de la versión

1.2 1. Características HTML

En HTML 5 no se necesita la referencia a una DTD.

Requiere la declaración siguiente, para que los navegadores se comporten como

deben:

(8)

Estructura - Cabecera

1.2 1. Características HTML

◉ <head></head>

Cabecera de la página.

Contiene información que afectará a toda la

página.

◉ <title></title>

Título de la ventana del

<head>

<title>Mi primera página WEB</title> </head>

8 <title></title>

(9)

Estructura - Cuerpo

1.2 1. Características HTML

◉ <body></body>

Incluye todos los elementos

que formarán la página web.

<body>

Contenido de mi primera página en html. </body>

(10)

Etiquetas, elementos

y atributos

2 y atributos

2

10

En un documento de marca siempre encontramos etiquetas, elementos y atributos.

(11)

Etiquetas

2.1 Una etiqueta

es un texto que va entre el símbolo menor que “<“ y el símbolo mayor

que “>”

2. Etiquetas, elementos y atributos

<alumno> <nombre>Carlos</nombre> <apellidos>Garrido Nieto</apellidos> <asignaturas> Etiqueta de inicio <apellidos>Garrido Nieto</apellidos> <asignaturas> <asignatura>LM</asignatura> </asignaturas> </alumno> Etiqueta de fin

Lo que contiene la etiqueta, suele ser el texto que

se ve directamente en pantalla.

(12)

Etiquetas - Encabezados

2.1 2. Etiquetas, elementos y atributos

Etiquetas que permiten mostrar titulares de hasta 6 niveles de importancia.

<h1>

₊

_importante

(13)

Etiquetas - Otras

2.1 2. Etiquetas, elementos y atributos

Etiqueta

Define:

<p></p> _Párrafos. <a href=“URL”>Enlace</a> _{Hipervínculos.}

<img src=“imagen.jpg” width=“” height=“” /> _{Incorpora imágenes.} <img src=“imagen.jpg” width=“” height=“” /> _{Incorpora imágenes.} <br> _{Inserta un salto de línea.} <b> </b> _{Texto en negrita.}

<i> </i> _{Texto en cursiva.} <ul> </ul> _{Listas no numeradas.} <ol> </ol> _{Lista numeradas.}

(14)

Etiquetas - Otras

2.1 2. Etiquetas, elementos y atributos

Etiqueta

Define:

<table> </table> _Tabla.

<tr> </tr> _{Fila de una tabla.} <td> </td> _{Columna de una tabla.}

Ver ejemplos tablas

14

<form> </form> _Formulario. <input> _{Insertar datos.}

<option> _{Opción dentro de un men}údesplegable.

<textarea> _{Control de entrada de texto multimedia.} <cols></cols> _{Anchura visible}

<rows></rows> _{Número de líneas visibles}

(15)

Elementos

2.2 Los elementos representan estructuras mediante las que se organizara

́

el contenido

del documento o acciones que se desencadenan cuando el programa navegador

interpreta el documento.

2. Etiquetas, elementos y atributos

Etiqueta de inicio <table> <tr>

</table>

Etiqueta de fin

Está formada por las etiquetas de inicio, fin y todo

lo que estas contengan dentro.

Algunos elementos no tienen contenido. Se les denomina elementos vacíos y no

deben llevar etiqueta de fin

(16)

Atributos

2.7 Un atributo

es un par nombre-valor que se encuentra dentro de la etiqueta de inicio

de un elemento e indican las propiedades que pueden llevar asociadas los elementos.

2. Etiquetas, elementos y atributos

<ficha>

<apellidos>García Pérez</apellidos>

16

Inconvenientes:

◉

_{No pueden contener valores m}

ú

ltiples.

◉

_{No pueden contener estructuras complejas.}

◉

_{No son fáciles de extender}

<apellidos>García Pérez</apellidos> <direccion>c/ Real 12</direccion> <ciudad provincia=“SE”></ciudad> </ficha>

(17)

Atributos

2.3 2. Etiquetas, elementos y atributos

◉

_{Un elemento puede llevar asociado propiedades llamadas atributos.}

◉

_{Un atributo puede llevar asociado un valor.}

◉

_{Los pares atributo-valor se colocan antes del final de la etiqueta inicio.}

◉

_{Los pares atributo-valor se colocan antes del final de la etiqueta inicio.}

◉

_{Pueden utilizarse todos los pares atributo-valor que se deseen separados por comas.}

◉

_{El orden de los atributos no es relevante.}

◉

_{El nombre del atributo va seguido del signo “=“ y el valor del atributo.}

(18)

Atributo - id

2.3 2. Etiquetas, elementos y atributos

Puede ir asociado a casi todos los elementos.

◉

_{Asigna un nombre a un elemento en el documento.}

◉

_{Debe ser}

ú

nico.

¿USOS?

id

18

Como selector en una hoja de estilos.

Como un ancla de destino en enlaces de hipertexto.

Como recurso para hacer referencia a un elemento particular desde un script.

Como nombre declarado de un elemento OBJECT.

Para propósito general en el funcionamiento de los navegadores.

¿USOS?

(19)

Atributo - class

2.3 2. Etiquetas, elementos y atributos

Puede ir asociado a casi todos los elementos.

◉

_{Asigna uno o más nombres de clase a un elemento.}

◉

_{Un elemento puede pertenecer a una o varias clases.}

¿USOS?

class

Como selector en una hoja de estilos cuando se desea asignar información de estilo a

un grupo de elementos.

Para propósito general en el funcionamiento de los navegadores.

¿USOS?

(20)

Atributo

–

Anclas

2.3 2. Etiquetas, elementos y atributos

Sirven para definir posiciones dentro de un documento y se puede usar como destino de

hiperenlaces.

<a name="final">Este es el final del documento!!</a>

20

<!– Hiperenlace para acceder al final del documento --> <a href="#final">Vamos al final del documento</a>

(21)

Referencia a caracteres

2.4 2. Etiquetas, elementos y atributos

Caracteres num

é

ricos o símbolos de caracteres que pueden incluirse en un documento HTML.

&carácter;

Caracter

Referencia a entidades

á _á é é _é í _í ó _ó ú _ú

(22)

Comentarios

2.5 2. Etiquetas, elementos y atributos

Los comentarios son ignorados por el navegador y no se visualizan.

 <!-- Primera línea del comentario,

segunda línea del comentario -->

22

Agrega a tu HTML dos comentarios

segunda línea del comentario --> <!– Esto es un <b>comentarios</b> y no se muestra <i> en el navegador </i> -->

(23)

Formularios

3 Formularios

(24)

Definición

3.1 3. Formularios

Los formularios permiten interactuar con el usuario que generará información para poder ser

procesada de alguna manera.

Elemento que puede contener:

◉

_{Texto normal.}

24

◉

_{Texto normal.}

◉

_Etiquetas.

◉

_{Controladores.}

(25)

Definición

3.1 3. Formularios

<html> <head> <title>Ejemplo de formulario</title> </head> <body> <h3>Formulario</h3> <h3>Formulario</h3>

<form action=“http://www.google.com” method=“post” enctype=“application/x-www-form-urlencodedaccept=“”> Escribe tu nombre:

</body> </html>

(26)

Declaración

3.2 3. Formularios

La etiqueta <form> englobará todos los contenidos del formulario.

Atributo

Define:

action Indica la URL que se encargará de procesar

los datos del formulario.

GET, tiene limitaciones: -No permite enviar ficheros adjuntos.

- Tiene límite de tamaño 500 bytes.

GET se suele usar en

26 los datos del formulario.

method Método HTTP empleado al enviar el

formulario.

- GET Envía las variables dentro de la propia URL de la página. (&) Por defecto. - POST La información es invisible al usuario.

enctype Tipo de codificaciones empleadas al enviar

el formulario al servidor.

Solo si se envía archivos adjuntos.

accept Lista, separada por comas de los tipos de

archivos aceptados por el servidor. usar en

(27)

Controladores - select

3.3 3. Formularios

_{Campos usados para insertar información por los usuarios:}

Campo que permite elegir entre una serie de opciones.

<form>

Elija un color: <br/> <select name=“color”>

<option value=“1” selected>Verde</option>

-

Al enviar se manda el valor del

atributo value de la etiqueta option.

<option value=“1” selected>Verde</option> <option value=“2”>Rojo</option>

<option value=“3”>Azul</option> <option value=“4”>Amarillo</option> </select>

-

El atributo selected permite elegir la

opción que debe estar seleccionada

por defecto.

(28)

Controladores - textarea

3.3 3. Formularios

Campo que permite elegir entre una serie de opciones.

<form>

Sugerencias: <br/>

-

cols

establece la anchura visible de

las líneas de texto (entero).

-

rows

establece el n

ú

mero de líneas

28

Modifica en tu HTML el formulario para que incorpore un textarea.

</textarea>

-

rows

establece el n

ú

mero de líneas

de texto visibles para el usuario. El

usuario puede introducir más, scrollbar.

(29)

Controladores - optgroup

3.3 3. Formularios

Agrupa opciones relacionadas dentro de una lista desplegable.

-

label: texto que se muestra como título

de la agrupación de opciones.

<optgroup label=“Segundo grupo"> <option value=“cuatro">Cuatro</option> <option value=“cinco">Cinco</option> <option value=“seis">Seis</option> </optgroup>

</select>

(30)

Controladores - input

3.3 3. Formularios

El controlador va a modificarse dependiendo del valor que se le asocie al atributo type.

type Define Atributos Ejemplo

<input type=“text” name=“mitexto”

30

Modifica en tu HTML el formulario para que incorpore controladores: text y password.

text Cajas de

texto

-name: identifica el cuadro de texto. -size: anchura.

- maxlength: limita el número de caracteres que se pueden escribir.

- value: texto por defecto.

name=“mitexto”

value=“valor por defecto” size=“tamano” maxlength=“longitudMaxima”/> password Caja de texto para contraseñas <input type=“password” name=“clave”

value=“clave por defecto” size=“tamano”

(31)

Controladores - input

3.3 3. Formularios

radio

Selección uno

radio uno

on-off _{- checked: mostrar} seleccionado por defecto.

checkbox

Selección varios on-off

<input type=“checkbox” name=“medico”>Médico</input> <input type=“checkbox” name=“abogado”>Abogado</input> <input type=“checkbox” name=“profesor”>Profesor</input>

image Imagen - src: direccion de la

(32)

Controladores - input

3.3 3. Formularios

reset Borrado <input type=“reset”/>

32

Modifica en tu HTML el formulario para que posea un botón de borrado, botón general, campos ocultos y un botón de envío. GET / POST

hidden

Incluir información

oculta

button Botón

genérico

- onclick: define la función cuando se pulsa

submit Botón de

(33)

Controladores - input

3.3 3. Formularios

file

Envio

archivos <input type=“file” name=“fichero” />

file archivos

adjuntos

(34)

Controladores

3.6 3. Formularios

En algunas ocasiones resulta

ú

til desactivar un control o presentarlo en modo lectura mediante el

uso del atributo disabled. Es soportado por los controladores:

-

button

-

input

34

Modifica en tu HTML el formulario para que incorpore un elemento desactivado y se active al marcar otro.

-

option

-

select

-

textarea

_{<form name="formulario" action="cualquiera.html" method="post">}

Acepto las condiciones

<input type="check" value="acepto“

onclick="document.formulario.enviar.disabled=!document.formulario.enviar.disabled"> <br />

(35)

Controladores

3.6 3. Formularios

Para conseguir que sea un controlador de solo lectura se utiliza el atributo readonly. Es

soportado por los controladores:

-

text

(36)

Otros

4 Otros

4

(37)

Estructura

4.1. 4. Otros

Etiqueta Define Atributos Ejemplo

label Establece el título del campo.

- for: indica el ID del campo del

formulario para el que este elemento es <label for=“nombre”>Nombre</label> label

campo. formulario para el que este elemento es _{su título.} <label for=“nombre”>Nombre</label>

div

Para agrupar los elementos que forman cada zona o división de la página.

(38)

Estructura

4.1 4. Otros

Se suele usar los mismos nombres para identificar las divisiones más comunes:

Nombre Función Se suele usar para...

-contenedor Encierra la mayor parte de los contenidos de la página. Define sus

características básicas. Anchura, bordes, imágenes…

38 -contenedor

características básicas. Anchura, bordes, imágenes…

- cabecera Incluye los elementos invariables de la página Logotipo, imagen, buscador...

- contenido Contenido principal del sitio web Noticas, productos, ...

-menu Agrupa elementos del menú. Menúlateral.

- pie Incluye los elementos invariables de la parte inferior de la página Copyright, privacidad... - lateral Agrupa elementos de las columnas laterales y secundarias de la página1

(39)

Estructura

4.1 4. Otros

(40)

Cabecera

4.2 4. Otros

Estructura de la cabecera

<head>

40

<title>El título del documento</title>

<link rel="stylesheet" href="#" type="text/css" media="screen" /> <link rel="stylesheet" href="#" type="text/css" media="print" />

(41)

Metadatos

4.2 4. Otros

Metainformación: información que se incluye en la página web, relacionada con esta,

que el usuario no ven.

Atributo Define Valor

name Nombre de la propiedad que se define. name=“texto”

content Valor de la propiedad definida. content=“texto”

http-equiv Reemplaza al atributo name y lo emplean los servidores para

adaptar sus respuestas al documento. http-equiv=“texto”

scheme Indica el esquema que se debe emplear para interpretar el

(42)

Metadatos - ejemplos

4.2 4. Otros

42 <meta scheme="ISBN" name="identificador" content="789-1392349610">

(43)

HTML 5

5 HTML 5

5 Aporta elementos enfocados a distintas tareas:

- Se permite las mayúsculas en las etiquetas.

- La etiqueta de cierre es opcional en los elementos vacíos. - Es opcional establecer un valor a los atributos.

(44)

Formularios- input

5.1 5. HTML 5

Valores input nuevos que incorpora HTML5.

type Define

search Caja de búsqueda

tel Número de teléfono

url Control para editar una url

Atributos Define

list

El ID de un elemento <datalist> cuyo contenido, los elementos <option>, van a ser usados como ayudas y serán mostrados como propuestas en el área de sugerencias del campo input. pattern Expresión regular contra la que es verificado el valor del

44 email Dirección de correo electrónico

number Aumenta/disminuye números

range Selecciona un valor en un intervalo usando botones.

time Hora.

date Seleccionar un día del calendario datetime Fecha y hora

pattern

control, que puede ser usada con: text, tel, search, url y email.

formmethod

Indica quémétodo HTTP (GET, POST, PUT o DELETE) debe ser usado cuando se envía; sobrescribe el method del elemento <form>, si se define.

Sólo si type es image o submit, y, para los method PUT y DELETE.

Sólo funcionará con un destino que estéen el mismo dominio. placeholder Inserta valor inicial que se borra automáticamente.

(45)

Formularios

5.1 5. HTML 5

Elemento Atributos Define

form novalidate Previene que el formulario sea validado antes de enviarlo.

pattern Expresión regular contra la que es verificado el valor del control, que puede ser usada con: text, tel, search, url y email.

con: text, tel, search, url y email.

formmethod

Indica quémétodo HTTP (GET, POST, PUT o DELETE) debe ser usado cuando se envía; sobrescribe el method del elemento <form>, si se define.

Sólo si type es image o submit, y, para los method PUT y DELETE. Sólo funcionará con un destino que estéen el mismo dominio.

(46)

Elementos de sección

5.2 5. HTML 5

Elemento Define

<header> Inserta información introductoria: título, logo, enlace…

<nav> Inserta una sección con enlaces a otras páginas dentro del documento. <section> Inserta una sección general. Se puede anidar para crear subsecciones.

Para evitar el uso indiscriminado de <div>

46 <section> Inserta una sección general. Se puede anidar para crear subsecciones.

<article> Crea componente que se va a reulizar en otro lugar.

<aside> Inserta sección relacoinada indirectamente con el contenido que tiene a su alrededor: barra lateral, publicidad, enlaces de navegación...

<footer> Inserta pie de página o de sección.

(47)

Elementos de sección

5.2

(48)

Multimedia

5.3 5. HTML 5

Permite reproducir vídeos, animaciones,

_{sonidos sin necesidad de tener instalados}

plugins.

Elemento Atributos Define

src URL del vídeo

poster Visualizar imagen mientras el vídeo no está disponible

48 <video>

<audio>

preload Mejora la visualización: none, metadata y auto autoplay Booleano, indica la reproducción automática

loop Booleano, indica la repetición automática

controls Booleano, indica al navegador que incorpore controles de usuario.

<video src="mivideo.mp4" width="300" height="200" controls> Tu navegador no soporta la etiqueta video

(49)

Introducción XHTML

4 Introducción XHTML

4 Surge como una combinación entre XML, orientado al intercambio de información, y

HTML, orientado a presentación.

HTML

XHTML

(50)

Sintaxis y versiones

4.1 4. Introducción a XHTML

Debe cumplir las misma normas que un documento XML bien formado:

Debe contener un elemento raíz que no debe duplicarse.

Se debe indicar la versión XML y la codificación de caracteres usada.

50