HTML

Capitulo 1: Terminologia y conocimientos básicos

• ¿Qué es HTML?
• Creación de un documento HTML
• Elementos de la etiqueta “head” de un documento HTML
• Elementos de la etiqueta “body” de un documento HTML
• Diseño básico de fuentes
• Diseño básico de párrafos
• Insertar y manipular algunos elementos basico de diseño
• Cimientos de una pagina HTML
• Visualisar la pagina HTML en un navegador
• Ejercicio práctico

• Introducción a los atributos de una etiqueta
• Elección del tipo de fuente; fuentes disponibles en un documento HTML
• Tamaño disponible de fuentes
• Colores disponible de fuentes; “hexadecimal values” en las plataformas Windows & Macintosh
• Diferencias entre colores RGB, CMYK y hexadecimales
• Como dar un formato consistente a las fuentes; “ bold, color, size, face etc.”
• Ejercicio práctico

• Diferencias entre las etiquetas “BR” y “P”
• Diferencias entre “H” y “P”
• Alineación de párrafos; Izquierda, centro y derecha
• Espacios horizontales y verticales
• Diferencias entre estilos de diseño gráfico y web
• Breve introducción a “CSS” para diseño de párrafos y fuentes
• Ejercicio práctico

• Creación de listas ordenadas
• Creación de listas no ordenadas
• Creación de listas de definición
• Creación de listas anidadas
• Combinación de listas ordenadas, no ordenadas y de definición en listas anidadas
• Manipulación de diseño de listas; “cuadrados, diamantes, numeros, etc.”
• Atributos de listas; “type, start, colour, etc”
• Ejercicio práctico

• ¿Qué es un enlace?
• Enlaces absolutos y relativos
• Enlaces dentro de la misma ventana o en una nueva ventana
• Enlaces a otros documentos HTML
• Enlaces a otros documentos diferentes a HTML: pdf, flash, quicktime movies etc.
• Enlaces dentro del mismo documento HTML; Enlaces saltos
• Enlaces saltos entre diferentes documentos HTML
• Diferencias entre; enlaces ordinarios, enlaces visitados, enlaces activos y enlaces hover
• Manipulación de los colores de los diferentes enlaces
• Ejercicio práctico

• Formatos de imágenes disponibles en cualquier navegador
• Diferencias entre imágenes “gif” y “jpeg”
• Insertar imágenes en un documento HTML
• Resolución y tamaño de imágnes en un documento HTML
• Manipulación de imágenes; alineación, bordes, altura, anchura, etc.
• Texto alternativo de imagen
• Usando imágenes como enlaces
• Importancia de la etiqueta “alt”
• Combinación de texto e imágenes en un mismo documento
• Alineación de texto e imágenes
• Creación de imágenes como fondo de página
• Ejercicio práctico

• Creación de una tabla sencilla
• Añadir un borde
• Añadir atributos; color de fondo, alto, ancho, color de bordes etc
• Añadir filas y columnas
• Añadir celdas que se extiendan varias filas
• Añadir celdas que se extiendan varias columnas
• Añadir texto a las celdas
• Añadir imágenes a las celdas
• Combinar imágenes y texto en una misma celda
• Valores absolutos y relativos de una tabla
• Alineación de tablas, filas, columnas y contenido
• Controlar el espacio entre celdas
• Controlar el espacio dentro de una celda con su contenido
• Colores de fondo de tabla, celda, fila y columna
• Uso de imágenes transparente gif para el diseño de una tabla
• Uso de imágenes de fondo en una tabla
• Anidar tablas usando valores relativos y absolutos
• Visualizar tablas en diferentes navegadores
• Ejercicio práctico