Scribd
Cargar
6 vistas11 páginas

Resumen HTML

HTML es un lenguaje de marcado estructural que utiliza etiquetas para organizar contenido en una página web, mientras que CSS es un lenguaje de estilos que controla la presentación visual de dicho contenido. HTML incluye etiquetas para la estructura, como <header>, <nav>, y <footer>, y atributos en el <head> para metadatos y enlaces a recursos. CSS permite definir estilos, colores y posiciones de elementos, utilizando selectores y propiedades como margin y position para el diseño responsivo.

Cargado por

Ivan Badoza
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
6 vistas11 páginas

Resumen HTML

HTML es un lenguaje de marcado estructural que utiliza etiquetas para organizar contenido en una página web, mientras que CSS es un lenguaje de estilos que controla la presentación visual de dicho contenido. HTML incluye etiquetas para la estructura, como <header>, <nav>, y <footer>, y atributos en el <head> para metadatos y enlaces a recursos. CSS permite definir estilos, colores y posiciones de elementos, utilizando selectores y propiedades como margin y position para el diseño responsivo.

Cargado por

Ivan Badoza
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 11

Que es un HTML?

Es un ARBOL de etiquetas (tags),


Es un Lenguaje , PERO NO DE PROGRAMACION , es de Estructura.
Pertenece al Paradigma DECLARATIVO(no nos importa el como , sino el que ,
por eso es declarativo)
Etiquetas de estructura
<aside> : contenido relacionado al principal
<nav> : navegación
<header> Encabezado del sitio o elemento
<main> contenido principal
<section> y <article> contenido secundario
<footer> pie de pagina
<div> contenedor genérico

Las etiquetas contienen atributos


Que tenemos en el < HEAD >?
Tenemos Metadatos, (Codificacion : UTF-8, que sea responsive :viewport,
width-device…. ,el SEO : posicionamiento de la web , description ,autor,
keywords)

Enlaces a recursos externos (como por ejemplo fonts el favicon),


Scripts que son necesarios para el funcionamiento y la presentación del
documento HTML
Aquí también va el <title> y los estilos a través de un <link
rel=”stylesheet” href=” styles.css”>, y los archivos js (aunque si no
usamos librerías externas , generalmente va en el body)
EJEMPLO DE ESTRUCTURA

Que hay en el <body>?

Contenido visible de la pagina web : texto, imágenes, videos, enlaces ,


formularios y otros elementos interactivos.

Etiquetas de contenido :
<p> párrafo
<h1> <h2> <h3> … heading MAYOR NUMERO , MENOR IMPORTANCIA

Etiquetas de contenido HTML

H1 : Solo UNO por pagina

Etiquetas multimedia

<img> la mas comun


<figure> se usa para encadenar una imagen con si descripción<figcaption>
EJEMPLO DE BODY
IMPORTANTE en el input incluir un label y el placeholder( en el label en el
for que coincida con el input)

Etiquetas de Estructura
<ul> lista desordenada
<li> lista

EJEMPLO DE UN NAVBAR
EJEMPLO DE UN MAIN

CLASE 2

Que es CSS?

Es un lenguaje de hojas de estilo, utilizado para CONTROLAR la presentación


y el diseño visual de documentos HTML y XML en una pagina web.

Colores , fuentes ,márgenes, espaciado , diseñado de columnas , tamaños


de texto , efectos visuales , etc.. .

EJEMPLO DE SINTAXIS

UNIDADES CSS
Algunas propiedades aceptan unidades : padding, margin , width , heigth

Absolutas: Tamaño FIJO , px ,cm ,mm , s.


Relativas: Toman su valor dependiendo de la referencia a una valor de otra
propiedad % , rem, em, vh,vw.
COLORES CSS
.Hexadecimal, RGB, HSL. Nombres en ingles .

CENTRAR EN CSS
Margin :0 auto;

Que hace el margin : 0 auto?


Centra elementos , Asignamos :0 al margen superior e inferior y un valor
auto para los márgenes izquierdo y derecho.
El valor auto: permite al navegador calcular automáticamente el tamaño
del margen.

Como funciona margin: 0 auto?

El elemento que quiero centrar debe ser un elemento de nivel de bloque o


un elemento con display : block; .
El elemento debe tener un ancho explicito especificado ( como width : 60%)

Text-aling: center, centra el texto

Que es el span?
Permite modificar mi estilo html , personalizarlo

Selectores:
PseudoSelectores:

CSS-Especificidad

Que valores serán tomados en cuenta por navegar de acuerdo a que tan
especifico es su selector.

ID Y Clases
- Un ID es único en toda la pagina HTML ( especificidad alta)
- Se utiliza el # para designar un ID

Clases
- Una clase se puede aplicar a múltiples elementos HTML
- Se utiliza el . para designar una class
- Un elemento puede tener múltiples clases
- Son menos especificas que los IDs
- Son muy útiles para aplicar estilos comunes a múltiples elementos

LA REGLA
CLASE 3 Position

Que es position?

Es un atributo CSS de todos los elementos HTML, que indica como se


posicionara esa etiqueta.
Que nos permite position ?
Controlar como se va a posicionar una etiqueta en la pagina web en relación
con sus elementos secundarios y con el flujo normal del documento.

CUANDO USAMOS POSITION PODEMOS AFECTAR 4 PROPIEDADES:


-top
-bottom
-left
-rigth

Position puede tomar 5 valores : Static, fixed, relative, absolute, sticky.

Static: Es el valor predeterminado para todas las etiquetas HTML.Se colocan


en el flujo normal del documento.NO :left,rigth,top y bottom (no sirven
para el static).Todo es static , hasta que nosotros lo digamos.

Fixed: Mantiene un elemento fijo en la navegación del documento.No


respeta el flujo del programa.Se usa para la NAV BAR,o alguna ventana
emergente.Se posiciona en relación a la ventana del navegador.
Permanece en la misma posición incluso cuando se desplaza la
pagina .util para crear : barras de navegación. Si : left,rigth, top y bottom.

Absolute: Permiten que los elementos se superpongan en referencia a la


pantalla o en referencia a un padding y se coloquen exactamente donde
se desee utilizando ,left,rigth,top y bottom.Si por ejemplo se quiere
posicionar un objeto en el medio de la pantalla , no bastara con (left: 50%
; top: 50%;) , habrá que agregar un transform: translate(-%50,-%50); que
lo que hará es restarle esa mitad a dicho objeto y posicionarlo en el
centro de la pantalla.No es fijo , es absoluto.OJO cuando usamos absolute
rodeado de static.

Relative:
Se utiliza en la clase padre para hacer relativo a un objeto y por ejemplo
centrar algo dentro de ella
Se colocan dentro del flujo normal del documento
Se usa frecuentemente en un elemento padre para establecer un contexto
de posicionamiento para sus elementos hijos
Si: left,rigth,top,bottom.

Sticky:Parece similar al relavite+ fixed.


Un elemento se mantiene relativo hasta que se cumple una cierta condición
( como desplazarse a una posición especifica en la pagina ), momento en el
que se convierte en un elemento fijo.
CLASE 4

FlexBox

- Es un modelo unidimensional. ( o una fila o una columna)


- Se utiliza para crear diseños y distribuir elementos en una pagina
web.(layouts)
EJES;
- Puedes colocar o distribuir tus elementos en una dirección : fila o
columna.
- Fila se aplica por default.

ROW
- Al espeificar row o row-reverse los elementos HIJOS se colocaran uno
al lado del otro.

Flex-direction: row;
Gap : 1 rem; (le da separación entre ellos)
El display flex se lo aplicamos siempre al padre
Justify-content: center ( centra el elemento hijo)
Flex-wrap:nowrap; lo que hace es hacer responsive el contenido que tiene
el flex

CONVENCION:
body{
Font-size:62.5%;
// 10 px= 1 rem//
}

También podría gustarte