Luma Studio

Luma Studio
¡Eres el Dueño de tus IDEAS!

Curso de Css y Html





En el curso de HTML y CSS básico aprenderá los fundamentos del lenguaje HTML y sus principales etiqueta, que te permitirán crear sitios web, trabajando bajo los estándares de W3C, En este curso partirás de los conceptos básicos del lenguaje HTML y sus versiones, que son necesarios para la construcción de un sitio web.

Comprendera la sintaxis del lenguaje, donde aprenderás a codificar desde un editor de texto, cualquier documento HTML. El curso finaliza con la publicación de un sitio desarrollado como práctica en clase, en un Servidor Web (Hosting) a través de un FTP.

CARACTERISTICAS DE HTML

HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado con el cual se construyen los sitios web. Conocer este lenguaje es fundamental para el desarrollo de documentos visuales a través de un navegador y también para el armado de mails con formato de Hipertexto.

__________________________________________________________________________________



Contenido Curso de HTML Básico 20 horas

ASPECTOS BÁSICOS


INTRODUCCIÓN
OBJETIVOS DEL CURSO
Descripción
Metas
Repaso diario

Que es el lenguaje HTML
Concepto de front end y backend
Lenguajes de frontend

Conceptos básicos
Versiones del lenguaje
Características del HTML
Concepto de etiqueta
Estructura de un proyecto web
Nomenclatura de los archivos y directorios
Concepto de archivo index

Editores de HTML
Estructura del documento HTML
Etiqueta doctype de HTML
Etiqueta doctype de otras versiones de HTML
Etiqueta head
Etiqueta body
Etiqueta title
Impacto del title en seo
Etiqueta meta charset

Concepto de semántica
Etiquetas de encabezados (h1 a h6)
Etiqueta de párrafo

Concepto de Etiqueta de vacía
Sintaxis de las etiquetas vacías según versiones de HTML
Etiqueta br
Etiqueta hr

Concepto de lista
Etiqueta de lista ordenada
Etiqueta de lista sin orden
Etiqueta ítem de lista
Etiqueta strong
Etiqueta em

Etiqueta de imagen
Concepto de atributo
Atributo alt
Atributo src
Atributos width y height
Atributo title
Concepto de ruta
Rutas relativas y absolutas

Concepto de vínculo
Etiqueta de vínculo
Atributo href
Vínculo relativo y absoluto
Vínculo de texto
Vínculo de imagen
Características nativas del vínculo (estados)
Vínculo de correo electrónico
Vínculos con anclas

Concepto de css
Atributo style
Propiedad font-family
Familias tipográficas para la web
Propiedad font-size
Propiedad color
Propiedad background-color
Propiedad background-image
Propiedad font-weight
Propiedad font-style

Etiqueta iframe
Usos posibles de la etiqueta iframe

Concepto de tabla
Uso correctos y posibles de las tablas
Etiqueta tr
Etiqueta th
Etiqueta td
Atributos HTML de las tablas
Aplicación de estilos en línea

Concepto de FTP
Concepto de dominio
Concepto de cliente FTP
Datos necesarios para subir una sitio vía FTP
Publicación del sitio en el servidor web

CSS
Que es el CSS
Cuales son los beneficios de trabajar con CSS
Versiones de CSS

TRABAJANDO CON CSS
Declaración de reglas de estilo
Hoja de estilo externa
Hoja de estilo embebida en el encabezado del documento
Estilos en línea
Creación de una hoja de estilo
Vinculación de una hoja de estilo
Diferencia entre vinculación e importación de una hoja de estilo
Reglas de estilo
Sintaxis de las reglas de estilo
Selectores
Formato de comentario
Estructura y Herencia
Selectores de grupo

Atributos tipográficos
Font Family (Familia de fuente)
Font Style (Estilo de fuente)
Font Variant (Variante de fuente )
Font Weight (Peso de fuente)
Font Size (Tamaño de fuente)
Font (Fuente) // declaración en una sola línea

Atributos de color
Color(color de texto)
Text-decoration (decoración de texto)
Text-align (alineación de texto)
Text-tranform (transformación de texto)
Text-indent (sangría de texto )

Atributos de fondo
Background-color (color de fondo)
Background-image (imagen de fondo)
Background-position (posición de fondo)
Background-attachmen (anclaje de fondo)
Background Repeat (Repetir fondo)
Background (Fondo) (declaración de una sola línea)

DIAGRAMACIÓN BÁSICA
ETIQUETA DIV
PORQUE REEMPLAZAR LAS TABLAS POR ETIQUETAS DIV
SELECTORES DE ID
ATRIBUTOS DE TAMAÑO
Width (ancho)
height (alto)

DIAGRAMACIÓN POR FLOAT
DIAGRAMACIÓN EN COLUMNA POR FLOTACIÓN
UTILIZACIÓN DEL ATRIBUTO FLOAT
Utilización del atributo Clear
Anidamiento de divs
Modelo de caja

ATRIBUTOS DE LA CAJA
Margin (margen)
Borde (Border)
Relleno (Padding)

ESCRITURA RESUMIDA (DECLARACIÓN DE UNA SOLA LÍNEA)
Declaración una línea para el padding
Declaración una línea para el margin
Declaración una línea para el borde
Diagramación centrada
Centrado de un div dentro de otro
Centrado de un div en el naveador

DIAGRAMACIÓN AVANZADA
DIAGRAMACIÓN AVANZADA CON POSICIÓN
Atributos de posición
Position Static (estático)
Position Relative (relativo)
Position Absolute (absoluto)
Position Fixed
Atributo de Z-index

DIAGRAMACIÓN CENTRADA
BARRAS DE NAVEGACIÓN
LISTAS
Listas Ordenadas
Listas desordenadas
Atributos para las listas
List-style-type
List-style-image
List-style-position

CREACIÓN DE BARRAS DE NAVEGACIÓN
SELECTORES DESCENDENTES
Pseudoclases
La pseudo-clase a:link
La pseudo-clase a:visited
La pseudo-clase a:hover
La pseudo-clase a:active

CLASES Y ESTILOS EN LÍNEA
SELECTORES DE CLASE
Creación de selectores de clase
Aplicación de clases

SELECTORES DE CONTEXTO
Orden de cascada
Jerarquías y especificidad
Estilos en línea

INTRODUCIÓN AL CSS 3.0
Que es CSS 3.0
Compatibilidad con los navegadores

OPACIDAD
Opacidad en Firefox, Opera, Chrome...
Opacidad en Internet Explorer
Bordes Redondeados
Propiedad border-radius
Declaración de la propiedad border-radius para safari y firefox
Sobra de texto
Propiedad text-shadow
Valores posibles para la propiedad text-shadow
Sobra de caja
Propiedad box-shadow
Valores posibles para la propiedad box-shadow
Declaración de la propiedad border-radius para safari y firefox
Trabajo practico integrador del curso

EVALUACIÓN DE LOS INSTRUCTORES


__________________________________________________________________________________


Algunos ejercicios en clase:




Publicar un comentario