Desarrollo web - Season 02

Vista previa del material en texto

Objetivo de la sesión:
Utilizar estructuras HTML para crear y organizar sitios web.
2
Propósito de la sesión
Competencia del perfil de egreso : La asignatura DISEÑO WEB, que corresponde al área de 
estudios de Especialidad, contribuye al logro del perfil de egreso, específicamente a la(s) 
competencia(s):
- CE3: DESARROLLO DE SOFTWARE
- CG4: COMUNICACIÓN ORAL Y ESCRITA
Resultado de Aprendizaje de la Unidad 01:
Realiza diseños web con herramientas de diseño gráfico y maquetado web básico.
Contribuye al logro
Contribuye al logro
Contenidos
Enlaces
Imágenes
Tablas
Ejercicios
3
La etiqueta <a> … </a>
Para insertar un enlace, la etiqueta que vamos a usar es muy fácil
de recordar: <a>. Sin embargo, necesita un atributo, href, que
indica la página a la que debería llevar el enlace.
4
Creación de enlaces – Enlace a otro sitio 
web
Vamos a incluir este enlace en un párrafo. Entonces:
• Dos páginas ubicadas en la misma carpeta
5
Enlace a otra página de nuestro sitio web
Aquí tenemos el código que vamos a usar en nuestros archivos
pag01.html (padre) y pag02.html (hijo)
• Dos páginas ubicadas en carpetas diferentes
Aquí tenemos el código que vamos a usar en nuestros archivos
pag01.html (padre) y pag02.html (hijo) que esta en la carpeta
contenido
• Dos páginas, enlace a una página en una carpeta superior
6
Enlace a otra página de nuestro sitio web (II)
Aquí tenemos el código que vamos a usar en nuestros archivos
pag02.html (padre) dentro de contenido y pag01.html (hijo)
• Un hipervínculo es una especie de punto de referencia que
puedes incluir en tus páginas HTML cuando son muy largas.
• Para crear un hipervínculo nuevo, Puede ser cualquier etiqueta,
por ejemplo un título. Para dar un nombre al hipervínculo, se
utiliza el atributo “id”. Entonces podremos usarlo para crear un
enlace a este hipervínculo. Por ejemplo:
7
Un enlace a un hipervínculo
<h2 id="enlace01">Título 1</h2>
<a href="#enlace01">enlace a título 01</a>
Acá se define el 
hipervínculo
Acá se define a donde 
va el hipervínculo
8
Ejemplo de hipervínculo
Insertar una imagen en el sitio web no es nada complicado. En los sitios
web se pueden utilizar varios formatos de imágenes diferentes y no
debemos elegirlos al azar. De hecho, a veces las imágenes son grandes
y tardan mucho en descargarse, lo que ralentiza el tiempo de carga de la
página.
Para resumir, el formato se debe escoger dependiendo de la imagen que
tengas, tal y como se indica a continuación:
• Una foto: usar JPEG.
• Cualquier gráfico que no tenga muchos colores (menos de 256):
usar PNG de 8 bits o posiblemente GIF.
• Cualquier gráfico con muchos colores (más de 256): usar formato
PNG de 24 bits.
• Una imagen animada: usar GIF animado.9
Imágenes
• Para insertar una imagen se utiliza la etiqueta <img>
• La etiqueta debe ir acompañada de dos atributos obligatorios:
– src: que indica la ruta de la imagen. Puedes ser absoluta 
(src=“http://www.website.com/flor.png”) o una ruta relativa (src="imagenes/flor.png“)
– alt: que significa "texto alternativo". Un texto alternativo a la imagen, en otras palabras,
un texto corto que describe lo que contiene la imagen, debe indicarse siempre. Este
texto se mostrará en lugar de la imagen si esta última no se puede descargar (esto
ocurre).
10
Insertar imágenes
• Las imágenes deben colocarse dentro de un párrafo (<p></p>).
Aquí tenéis un ejemplo de imagen insertada:
11
Insertar imágenes (II)
• Añadir una descripción emergente
Una tabla básica se compone de:
• El encabezado (al principio): se define con las etiquetas <thead></thead>;
• El cuerpo (en el centro): se define con las etiquetas <tbody></tbody>;
• El pie de tabla (al final): se define con las etiquetas <tfoot></tfoot>.
12
Tablas
thead
tbody
tfoot
Es un poco confuso, pero es 
recomendable escribir las etiquetas 
en el orden siguiente:
1. <thead>
2. <tfoot>
3. <tbody>
13
Crear la tabla de ejemplo
A B C
14
Ejercicio 
tablas
15
Código de apoyo
16
Código de apoyo
17
Código de apoyo
• Versión 02: Mejorar el formato de 
la tabla agregando colores, 
imágenes, etc.
25
• El lenguaje HTML es el más usado para para programación
Front – End.
• El uso de etiquetas nos permitirá mejorar el diseño y
formar muchas estructuras debidamente organizadas con
imágenes, enlaces tablas, etc.
Conclusiones