Post on 26-Jul-2015
ETIQUETAS Y ATRIBUTOS
Estructura básica de un HTML
<!DOCTYPE html> <html lang="es">
<head> </head> <body> </body>
</html>
Recordando las reglas de HTML
• Toda etiqueta debe cerrarse.
• Mantener una indentación correcta.
• Los caracteres especiales se colocan con código.
• NO SE DEFINEN ESTILOS EN HTML
Recordando términos
<p>Esto es un <strong>elemento</strong> común</p>
<img src="guitarra.png" alt="Imagen de guitarra" />
1 2 3
4
<html>
<head> <body>
<div><form>
<p> <ul>
<em><strong> <a> <li>
Imágenes en HTML
Formatos utilizados
JPG Imágenes grandes, fotografías, fondos
GIF Iconografía, imágenes con movimiento, imágenes con transparencia
PNG Iconografía, imágenes con transparencia
Comparación PNG y GIF en transparencia
PNG GIF
Comparación de peso PNG y JPG
PNG - 64 Bit Imagen 1024 x 768 950 Kb
JPG – 50% Imagen 1024 x 768 77 Kb
Uso Límite de color
Permite anima-ción
Permite transpa-
rencia
Adecuado para web
GIF Iconografía y gráficos con pocos colores 256
JPG
Fotografías e imágenes con
muchos colores y detalle.
16 millones
PNG-8Iconografía y
gráficos con pocos colores.
256
PNG-24
Fotografías e imágenes con
muchos colores y detalle.
16 millones
Imágenes en HTML
<img src="guitarra.png" alt="Imagen de guitarra" />
Carpeta raíz
Imágenes
Estilos
Scripts
Imágenes en HTML
<img src="images/guitarra.png" alt="Imagen de guitarra" />
Carpeta raíz
Imágenes
Estilos
Scripts
Páginas
Imágenes en HTML
<img src="../images/guitarra.png" alt="Imagen de guitarra" />
Ligas en HTML
<a href="http://www.google.com">Google<a/>
Externas
Internas - otro archivo
Internas - mismo archivo
<a href="pagina.html">Mi página<a/>
<a href="#seccion">Mi sección<a/>
Ligas en HTML
Internas - mismo archivo
<a href="#seccion">Mi sección<a/> .... (Mucho contenido, mucho scroll) ... <p id="seccion">Texto de sección</p>
El atributo id
• Identifica a una etiqueta como única
• No puede repetirse en una página
• No todas las etiquetas necesitan tener id
• Se hace referencia a un elemento con su id precedido por un signo de #