Diseño de páginas web

DISEÑO DE PÁGINAS WEB

• Página Web: Es un sitio web (website) constituido por distintos documentos (páginas web) enlazados entre sí a los que se accede a través de una dirección común. Cada documento es un archivo que contiene texto, imágenes, gráficos, etc.

HTML ( hipertext markup languaje)XHTML (la X es de extensible)

• Es el lenguaje que se utiliza para crear los documentos que conforman el sitio web.

• Para crear una página web se puede hacer:– Escribiendo directamente este código en cualquier

editor de textos y guardándolo con la extensión adecuada (.html o .htm)

– Utilizando editores de páginas web:• Editores WYSIWYG• Editores que trabajan directamente con HTML

TIPOS DE PÁGINAS WEB

• ESTÁTICAS: Son aquellas que no cambian, que muestran siempre el mismo contenido cada vez que las cargamos. Se realizan en lenguaje HTML.

• DINÁMICAS: Son páginas que devolverán diferentes resultados, sin realizar cambios en el código, en función de la actuación del usuario.

PLANIFICACIÓN, OBJETIVOS Y ELEMENTOS DE UNA

WEB.

PREDISEÑO1. Objetivo ¿Qué se pretende conseguir con la web?

2. Público ¿A quién se dirige?

3. Contenidos ¿Qué contenidos se quieren mostrar?

4. Directrices ¿Qué especificaciones se usarán en cuanto a forma, organización y estructura?

5. Tecnología ¿Con qué medios técnicos se cuenta para realizarla?

6. Tiempo ¿De cuánto tiempo se dispone?

7. Presupuesto ¿De cuánto dinero se dispone?

RECOMENDACIONES

• Crear una jerarquía visual clara en cada página.• Utilizar las convenciones (lo que se usa de forma

mayoritaria en las páginas web).• Dividir las páginas en áreas claramente definidas.• Facilitar el acceso a los enlaces.• Omitir contenidos innecesarios: simplificar.

ELEMENTOS DE UNA WEBencabezamiento

Marca o logotipo Titular

Menú de navegación

Contenidos

Nota de pie de página

ELEMENTOS DE DISEÑO

• MAQUETACIÓN: Se encarga de organizar espacios y contenidos escritos, visuales y audiovisuales. Son: elementos gráficos y tipográficos, elementos de imagen.

• INTERFAZ: Conjunto de comandos y métodos que facilitan la interacción entre el usuario y el sitio web

EMPEZAR A PROGRAMAR EN HTML

1. Abre el bloc de notas (Inicio/Programas/Accesorios/Bloc de notas)

2. Copia las etiquetas básicas que siempre debe tener una página

3. Añade el título entre las etiquetas <title> y </title>

4. Añade el contenido de la página entre las etiquetas <body> y </body>

5. Guardar (empezando.htm)

ETIQUETAS HTML

• <br> : Salto de línea en el mismo párrafo. No necesita etiqueta de cierre.

• <p> </p> : párrafo.

ETIQUETAS HTML

TIPOS Y CUERPOS DE LETRAETIQUETA FUNCIÓN

<font face=“Algerian”> </font> Tipo de letra<font color=“red”> </font> Color de la letra<font size=“1”> </font> Tamaño de la letra<small> </small> Reduce el tamaño de la letra<big> </big> Aumenta el tamaño de la letra

ETIQUETAS HTML

ENFATIZACIÓNETIQUETA FUNCIÓN

<b> </b> Negrita<strong> </strong> También negrita<i> </i> Cursiva<em> </em> También cursiva<u> </u> Subrayado

ETIQUETAS HTML

JUSTIFICACIÓNETIQUETA FUNCIÓN

<div align=“left”> </div> Alinea el texto a la izquierda<div align=“center”> </div> Alinea el texto al centro<div align=“right”> </div> Alinea el texto a la derecha<div align=“justify”> </div> Justifica el texto a ambos lados

ETIQUETAS HTML

• TÍTULOS O CABECERAS– Sirven para organizar el texto, no como elementos

de diseño de la página.

Este código Da como resultado…<h1>Título 1</h1> Título 1<h2>Título 2</h2> Título 2<h3>Título 3</h3> Título 3

<h4>Título 4</h4> Título 4

ETIQUETAS HTML

LISTAS ORDENADAS (NUMERADAS)

<ol> <li>Primero</li> <li>Segundo</li> <ol> <li>Segundo A</li> <li>Segundo B</li> </ol></ol>

1. Primero2. Segundo 1. Segundo A 2. Segundo B

ETIQUETAS HTML

LISTAS DESORDENADAS (CON VIÑETAS)

<ul> <li>Primero</li> <li>Segundo</li> <ul> <li>Segundo A</li> <li>Segundo B</li> </ul></ul>

Primero Segundo • Segundo A • Segundo B

ETIQUETAS HTMLTABLAS<table> </table> Inserta una tabla

ATRIBUTOS DE UNA TABLA

<Align=“center… “> Alineación de la tabla

<bgcolor=“_“> Color de fondo de la tabla

<border=“_“> Borde para la tabla

<cellpadding=“_”> Separación entre el borde de la tabla y el contenido

<width=“_”> Ancho de la tabla

<height=“_”> Alto de la tabla

ETIQUETAS HTML

TABLAS

<tr> </tr> Fila de una tabla

<td> </td> Columna o celda de una tabla

Los atributos de estas dos etiquetas son similares a los de la tabla (color, ancho, etc.)

frame (marco) permite especificar en qué lados de la tabla deben ser añadidos bordes . Puede adoptar los siguientes valores:

•frame="void" ( void = nada ) no es visualizado ningún borde exterior. Si se especifica un valor border se ven las líneas de la cuadrícula, apareciendo la tabla como una reja abierta por todos lados.•frame="above" ( above = superior ) solo se muestra la línea superior del borde.•frame="below" ( below = inferior ) solo se muestra la línea inferior del borde.•frame="vsides" (vertical sides = lados verticales ) son visualizadas tan sólo las líneas laterales del borde.•frame="lhs" (left hand side = lado izquierdo ) se muestra sólo la línea izquierda del borde.•frame="rhs" ( right hand side = lado derecho ) se muestra sólo la línea izquierda del borde.•frame="hsides" ( horizontal sides = lados horizontales ) son visualizadas tan sólo las líneas superior e inferior.

Ejercicio de tablasInsertar una tabla de fondo azul y bordes de

grosor 1, con las siguientes premisas:1.Texto 1: En negrita y centrado.2.Texto 2: Subrayado, alineado izqda y fondo

rojo3.Texto 3: Tamaño 40, alineado derecha4.Texto 4: Color blanco, tamaño 355.Texto 5: Dos líneas en la misma celda6.Texto 6: Color rojo, subrayado, negrita y

fondo amarillo.

Texto 1 Texto 2 Texto 3Texto 4 Texto 5a

Texto 5bTexto 6

ETIQUETAS HTML

• IMÁGENES- Imagen de fondo de página:

<body background=“imagen.jpg” topmargin=“ 20“ leftmargin=“20”>

- Insertar una imagen:<img src=“images/imagen.jpg” width=“30”

heiht=“25” alt=“Texto alternativo”>

ETIQUETAS HTMLVÍNCULOS

• VÍNCULOS EXTERNOS ABSOLUTOS<a href=“http://www.......htm”>Texto enlace</a>

• VÍNCULOS EXTERNOS RELATIVOS <a href=“página”>Texto enlace</a>

• VÍNCULOS INTERNOS<a name=“destino”></a>(Destino<br>) <a href=“#destino”>Texto enlace</a>

Diseño de páginas web

Internet

Transcript of Diseño de páginas web