Diseño web con HTML y CSS (2023)

Una breve introducción a HTML

Aclararemos algunos conceptos, por ejemplo:

¡HTML no es un lenguaje de programación!

Además veremos las sintaxis de las etiquetas HTML

En esta clase haremos la estructura básica de un documento HTML y para que sirve cada etiqueta que utilizaremos aquí,

Recuerda que el documento se divide en dos:

• head, donde va el contenido que no se ve, información acerca del documento
• body, donde va todo el contenido visible.

Puedes descargar el archivo que trabajamos en esta clase.

Veremos algunas etiquetas básicas que nos permiten mostrar texto de diversas maneras y con diferente significado.

Los hipervínculos son la base de toda la web.

Veremos sobre como insertar hipervínculos en HTML, además de las rutas absolutas y relativas.

Y un interesante atributo de HTML5 para los enlaces...

Veremos 2 tipos de listas: <ul> y <ol>

Veremos como insertar imágenes con las etiqueta <img>

Unas etiquetas adicionales a la hora de agregar imágenes que te pueden servir

Conocer las etiquetas semánticas nos permite crear una estructura semántica en HMTL la cual es necesaria en un sitio web para que este tenga un significado para el navegador.

En esta clase conoceros las etiquetas que siempre nos van a acompañar a la hora de estructurar un formulario en HTML

Ahora aprenderemos otros tipos de input:

• email

• password

• hidden

• number

• search

• file

• color

• date

• radio

• checkbox

Empezamos ahora con CSS, conoceremos las formas de agregar CSS y cual de ellas es la mejor.

Veremos dos selectores, de clases y de id y cual de ellos es el más práctico

Otros selectores que usamos constantemente

Aprenderemos como podemos seleccionar a los hijos directos de un elemento

Conoceremos los selectores de hermanos siguiente y general

Estos selectores serán muy útiles para diferenciar elementos dependiendo de su contenido o incluso cuando trabajemos con iconos

Veremos algo tan básico como las formas de añadir colores en CSS.

Aquí tienes los recursos para ver las 147 palabras clave:

1. http://colours.neilorangepeel.com/

2. http://www.colors.commutercreative.com/

Conoceremos las pseudoclases Hover, Link, Visited y Active

Ahora veremos pseudoclases para seleccionar

nth-child

first-child y

last-child

Este es uno de los conceptos más importantes que necesitamos comprender en CSS veremos los elementos de modelo de caja.

Elemento Interno

Content (Contenido)

Padding (Relleno)

Border (Borde)

Elemento Externo

Margin

Podemos especificar la medida de un elemento de varias formas, aquí veremos las unidades de medida que más usamos en el diseño web.

Otro concepto necesario de comprender es el posicionamiento

Veremos primero que es el flujo y que valores tiene la propiedad position

Veremos propiedades que nos permiten controlar la manera de como se muestra un elemento.

Visibility y Overflow

¿Sabías que podemos crear elementos a partir de otro solo con CSS? En esta clase veremos como hacerlo

Ahora nos toca hablar de Flexbox, un método de css que nos ayuda bastante a la hora de diseñar páginas web.

Terminando con los fundamentos de CSS, ahora hablaremos del Responsive Web Design, y veremos algunos métodos que se usan para ello:

1. El Meta viewport

2. Contenido adaptable

3. Media Query

Finalizamos el proyecto de fin de curso diseñando el formulario de la página de contacto