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ÑO
1. 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 WEB
encabezamiento
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 LETRA
ETIQUETA 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ÓN
ETIQUETA FUNCIÓN
<b> </b> Negrita
<strong> </strong> También negrita
<i> </i> Cursiva
<em> </em> También cursiva
<u> </u> Subrayado

ETIQUETAS HTML
JUSTIFICACIÓN
ETIQUETA 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. Primero
2. 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 HTML
TABLAS
<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 tablas
Insertar 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
rojo
3.Texto 3: Tamaño 40, alineado derecha
4.Texto 4: Color blanco, tamaño 35
5.Texto 5: Dos líneas en la misma celda
6.Texto 6: Color rojo, subrayado, negrita y fondo
amarillo.

Texto 1 Texto 2
Texto 3
Texto 4 Texto 5a
Texto 5b
Texto 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 HTML
VÍ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

Más contenido relacionado

La actualidad más candente

Similar a Diseño de páginas web

Más de mmunozgarces

Diseño de páginas web