diseño de páginas web
TRANSCRIPT
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>