09/10/2016

IFCD0110
Confeccin y Publicacin de Pginas Web

Familia profesional: Informtica y Comunicaciones

rea profesional: Desarrollo
Nivel de cualificacin profesional: 2

IFCD0110
MF0950 Construccin de pginas web.
MF0950_2: Construccin de pginas web. (210 horas).
UF1302: Creacin de pginas web con el lenguaje de marcas. (80 horas).
UF1303: Elaboracin de hojas de estilo. (70 horas).
UF1304: Elaboracin de plantillas y formularios. (60 horas).

1
 09/10/2016

IFCD0110
MF0950 Construccin de pginas web.
UF1302: Creacin de pginas web con el lenguaje de marcas. (80 horas).

1. Los lenguajes de marcas.

2. Imgenes y elementos multimedia
3. Tcnicas de accesibilidad y usabilidad
4. Herramientas de edicin web

UF1302: Creacin de pginas web con el lenguaje de marcas.

IFCD0110
MF0950 Construccin de pginas web.
UF1302: Creacin de pginas web con el lenguaje de marcas.
1. Los lenguajes de marcas.

Caractersticas de los lenguajes de marcas.

Estructura de un documento creado con lenguaje de marcas.
Navegadores web.
Marcas para dar formato al documento.
Enlaces y direccionamientos.
Marcos y capas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

2
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

Caractersticas de los lenguajes de marcas.

Utilizacin de etiquetas.
Compatibilidad.
Editores de texto.
Estructura de un documento creado con lenguaje de marcas.
Comienzo del archivo.
Encabezados.
Titulo.
Estilos.
Cuerpo.
Scripts.

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

Caractersticas de los lenguajes de marcas.

Utilizacin de etiquetas.
Compatibilidad.
Editores de texto.

UF1302: Creacin de pginas web con el lenguaje de marcas.

3
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

Lenguaje creado para codificar un documento que, junto con el texto,

incorpora etiquetas.

De presentacin: Indica el formato del texto ej. HTML Descriptivo o semntico: Utiliza
etiquetas para describir los fragmentos de texto, ej. XML

Son simples de usar.

Facilidad de procesamiento.
Muy flexible.

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

HyperText Markup Language (lenguaje de marcas de

hipertexto), hace referencia al lenguaje de
marcado para la elaboracin de pginas web.

Es un estndar que sirve de referencia del software

UF1302: Creacin de pginas web con el lenguaje de marcas.

4
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

5
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

No todos los navegadores interpretan en

cdigo HTML y CSS de la misma manera.

Es conveniente validar el cdigo de tu

sitio web en base a los estndares del
W3C, escaneando tu web en busca de
errores de programacin:

http://validator.w3.org

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

6
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

Programa informtico que permite crear y modificar archivos digitales compuestos

nicamente por textos sin formato, o archivos de texto plano. El programa lee el
archivo e interpreta los bytes ledos segn el cdigo de caracteres que usa el editor. Es
comnmente de 7- u 8-bits en ASCII o UTF-8.

El archivo creado por un editor de texto incluye por convencin en DOS y Microsoft
Windows la extensin ".txt", aunque pueda ser cambiada a cualquier otra con
posterioridad. Tanto Unix como Linux dan al usuario total libertad en la denominacin
de sus archivos.

UF1302: Creacin de pginas web con el lenguaje de marcas.

7
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

8
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

9
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

10
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

Estructura de un documento creado con lenguaje de marcas.

Comienzo del archivo.
Encabezados.
Titulo.
Estilos.
Cuerpo.
Scripts.

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

Permite escribir texto de forma

HTML El HTML (Hyper Text estructurada.
Markup Language) es
el lenguaje con el que Compuesto por etiquetas.
se escriben las pginas
web. HTML5 provee bsicamente tres
. caractersticas: estructura, estilo
y funcionalidad.

UF1302: Creacin de pginas web con el lenguaje de marcas.

11
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

Apertura y cierra de etiquetas

Etiquetas

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

El cdigo HTML debe insertase entre las etiquetas <html> y </html>

Se divide en dos secciones: cabecera y cuerpo.

<!DOCTYPE html>Indicar el tipo de documento que estamos creando.

Definiremos el ttulo de nuestra pgina web, declararemos el set de caracteres

correspondiente.

Proveeremos informacin general acerca del documento e incorporaremos los

archivos externos con estilos, cdigos Javascript.

Excepto por el ttulo y algunos conos, el resto de la informacin incorporada en el

documento entre estas etiquetas es invisible para el usuario.
UF1302: Creacin de pginas web con el lenguaje de marcas.

12
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

HTML usa un lenguaje de etiquetas para construir pginas web.

Estas etiquetas HTML son palabras clave y atributos rodeados de los signos mayor y
menor.

Html es la palabra clave y lang es el atributo con el valor es.

La mayora de las etiquetas HTML se utilizan en pares, una etiqueta de apertura y una
de cierre, y el contenido se declara entre ellas. indica el comienzo del cdigo HTML y
</html> indica el final.

El cuerpo representa la parte visible y es especificado entre etiquetas <body>.

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

Las etiquetas meta, o como se conocen en ingls, meta

tags y describen la pgina para que pueda ser entendida
por buscadores o navegadores.
No muestran contenido.

UF1302: Creacin de pginas web con el lenguaje de marcas.

13
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

La etiqueta title influye en el posicionamiento de tu

pgina. Las primeras recomendaciones para title, son:

Muestra una etiqueta fiel al contenido.

Limita su longitud a una mximo de 65 caracteres

No utilizes el mismo ttulo en varias pginas.

El ttulo, index, home, inicio, etc, no son buenos para
el posicionamiento en buscadores.

UF1302: Creacin de pginas web con el lenguaje de marcas.

14
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

Los elementos link se utilizan para incorporar estilos, cdigos Javascript, imgenes o iconos
desde archivos externos.

Uno de los usos ms comunes para <link> es la

<link rel=stylesheet href=misestilos.css>

HTML5 ya no se necesita especificar qu tipo de estilos estamos insertando, por lo que el

atributo type fue eliminado:

<link rel="stylesheet" type="text/css" href="direccionestilo.css" />

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

Estructura del documento se generar

entre las etiquetas body, que conforman
la parte visible del documento.

HTML ofrece diferentes formas de

construir y organizar el cuerpo de un
documento

UF1302: Creacin de pginas web con el lenguaje de marcas.

15
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

<header> provee informacin introductoria

(ttulos, subttulos, logos).
<nav> barra es generada en HTML5 con elelemento
<section> contiene la informacin ms relevante
del documento y puede ser dividida en varios
bloques o columnas.
<article> presentan informacin relevante dividida
en partes con similares caractersticas.
<aside> Contiene datos relacionados con la
informacin principal pero que no son relevante. La
etiqueta no tiene una posicin predefinida.
<footer> es cerrar nuestro diseo para otorgarle un
final al cuerpo del documento.
UF1302: Creacin de pginas web con el lenguaje de marcas.

16
 09/10/2016

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

La pginas web suelen completarse con scripts o libreras para darles cierta
funcionalidad.

Los navegadores interpretan el cdigo html que tiene nuestra pgina y lo hacen de
modo secuencial, es decir, van leyendo y tratando las etiquetas, desde la
etiqueta <html> a</html>, segn van apareciendo en el cdigo.

Cuando el navegador se encuentra una etiqueta <script> con el atributo src, el

navegador carga el archivo y lo ejecuta.

Podemos invocar un solo archivo, o dos, tres, cuatro tantos como resulten necesarios:

<script type="text/javascript" src="functions.js"></script>

UF1302: Creacin de pginas web con el lenguaje de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

1. Los lenguajes de marcas.

UF1302: Creacin de pginas web con el lenguaje de marcas.

17
 09/10/2016

IFCD0110
MF0950 Construccin de pginas web.
UF1302: Creacin de pginas web con el lenguaje de marcas.
1. Los lenguajes de marcas.

Caractersticas de los lenguajes de marcas.

Utilizacin de etiquetas. Compatibilidad. Editores de texto.
Estructura de un documento creado con lenguaje de marcas.
Comienzo del archivo. Encabezados. Titulo. Estilos. Cuerpo. Scripts.

UF1302: Creacin de pginas web con el lenguaje de marcas.

18