2. • 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.
3. 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
4. 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.
6. 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?
7. 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.
8. ELEMENTOS DE UNA WEB
encabezamiento
Marca o logotipo Titular
Menú de
navegación
Contenidos
Nota de pie de página
9. 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
10. 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)
11. ETIQUETAS HTML
• <br> : Salto de línea en el mismo párrafo. No
necesita etiqueta de cierre.
• <p> </p> : párrafo.
12. 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
14. 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
15. 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
16. 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
17. 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
18. 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
19. 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.)
20. 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.
21.
22. 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.