OBTETIVO
Considerando que el código HTML es uno de los factores más importante a la hora de construir una
web, este curso está orientado a enseñar a usar una buena semántica para posicionar la página web en
Google.
También aprenderemos a usar las distintas etiquetas, que nos brindan la posibilidad de crear listas,
tablas e imágenes. Asimismo, las principales que crean la estructura principal. Es dable destacar que
además aprenderemos a trabajar con hiperenlaces para conectar distintos documentos o ir a una zona
distinta de un mismo documento
CONTENIDO:
1 Clase
¿Qué es BAKEND y FRONTEND? ¿Dónde se puede crear o editar HTML?
¿Qué es HTML5?
¿Para qué sirve?
¿Cómo se forma la estructura?
¿Cómo se forman las etiquetas de títulos?
¿Para qué sirven las etiquetas b y strong?
¿Cómo se forma un párrafo?
Además veremos algunas consideraciones a tener en cuenta:
🔌¿Para qué sirve Lorem?
🔌¿Cómo poner comentarios?
🔌¿Cómo guardar?
🔌¿Qué diferencia había entre las estructuras de antes y ahora?
2 CLASE
¿Existen otros tipos de editores?
¿Qué versión de HTML estamos usando?
¿Cómo se forma la estructura del head?
¿De dónde conseguir fuentes de letras?
¿Cómo agregar un icono a la pestaña de titulo?
¿Cómo se forma una etiqueta y para qué sirven los atributos?¿Cómo se forma la estructura del
body?
¿Para qué sirve la etiqueta hgroup?
¿Para qué sirve la etiqueta nav?
¿Para qué sirven las etiquetas ul, li, ol?
¿Para qué sirven los enlaces, que tipos de enlaces hay y cómo se forman?
¿Cómo se inserta un párrafo?
¿Para qué sirve la etiqeuta span?
¿Cómo se diseña un menú en HTML?
Clase 3
¿Qué son los sitios web?
¿Qué etiqueta contiene el contenido principal?
¿Cuáles son las diferencias entre article, section y div?
¿Para qué se utiliza aside?
¿Cómo se forma la parte final de una página web?
¿Cómo insertar imágenes?
¿De dónde puedo conseguir imágenes sin copyright?
¿Cómo insertar audios?
¿Cómo insertar videos y cuál es la forma más beneficiosa de subir uno a nuestra página web?
¿Cómo se usan las etiquetas para textos?
Clase 4
¿Cómo se compone un sitio web?
¿Cómo desarrollamos un sitio web?
¿Qué son los dominios y url?
¿Cómo están compuestos los sitios web?
¿Qué son los formularios?
¿Cuáles son las etiquetas que se usan en los formularios?
¿Cuáles son los atributos que se usan en los formularios?
¿Qué son las tablas y cómo se utilizan?
+ etiquetas
Clase 5
¿Qué son los hipervínculos?
¿Cuáles son los lenguajes del servidor?
¿Cómo hacemos nuestra página web visible?
Examen
Para obtener el certificado el alumno tiene que diseñar una estructura
OBJETIVO
Previo tenemos que saber que es un gran aliado de HTML, que ayuda a
generar una buena experiencia de los que visitan tu página web. En el
curso de CSS aprenderemos como usar este lenguaje para poder modificar
las propiedades para hacer que nuestro sitio web se vea como queremos.
También aprenderemos adaptar nuestro diseño a cualquier dispositivo
Contenido
MODULO 1
CONCEPTO
SINTAXIS
CÓMO SE APLICA (NAVEGADOR-USUARIO-CLIENTE)
NORMALIZE
COMO SE UTILIZA
OPERADORES
ID
CLASS
MODULO 2
FORMAS DE SELECCIONAR ELEMENTOS (ADYACENTES - HIJOS - HERMANOS - ATRIBUTOS)
ESPECIFICIDAD
CÓMO SE CALCULA
JERARQUÍA
MODULO 3
Metodología Bem
Como trabajar con Bem
Unidades de Medidas
Absolutas
Relativas
MODULO 4
COLORES
COLORES RESERVADOS
COLORES RGB DECIMAL
COLORES RGB HEXADECIMAL
COLORES RGB PORCENTUAL
COLORES CON TRANSPARENCIA
MODULO 5
QUINTA CLASE
MODELO DE CAJA
WIDTH - HEIGHT
MARGIN - PADDING
MODULO 6
BACKGROUND
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-blend-mode
Gradientes
linear-gradient
radial-gradient
MODULO 7
FONT-FAMILY
FONT-SIZE
FONT-WEIGHT
FONT-STYLE
FONT
GOOGLE FONTS
TEXT-ALIGN
LETTER-SPACING
WORD-SPACING
LINE-HEIGHT
TEXT-INDENT
TEXT-DECORATION
LIST-STYLE
MODULO 8
BORDES
BORDER-WIDHT
BORDER-STYLE
BORDER-COLOR
BORDER
BORDER-RADIUS
OUTLINE-WIDHT
OUTLINE-STYLE
OUTLINE-COLOR
OUTLINE-OFFSET
OUTLINE
BORDER-IMAGE-SOURCE
BORDER-IMAGE-WIDHT
BORDER-IMAGE-REPEAT
BORDER-IMAGE-SLICE
BORDER-IMAGE-OUTSET
BORDER-IMAGE
MODULO 9
SOBRAS
BOX-SHADOW
TEXT-SHADOW
POSITION
MODULO 10
BLOCK
INLINE
INLINE-BLOCK
MODULO 11
flex-grow:
flex-shrink:
flex-basis:
flex-direction
order
justify-content
align-items
align-self
flex-wrap
align-content
MODULO 12
COLUM-ROW
COLUM GAP - ROW GAP
LINEAS
PROPIEDADES GRID
GRID TEMPLATE AREAS
REPEAT
ESTRUCTURA GRID
MODULO 13
Z-INDEX
OVERFLOX
VISIBILITY - OPACITY
:HOVER
TRANSITION
ANIMATION
TRANSFORM
RESPONSIVE
EXAMEN
Para obtener el certificado se requiere en esta instancia diseñar un menú. También sería
considerable que se diseñe un menú que se adapte a las distintas resoluciones.
Sitio: [Link]