F脫RMULARIO DE TIQUETAS (HTML) Y PROPIEDADES (CSS)
驴Qu茅 es HTML?
HTML significa lenguaje de marcado de hipertexto, y le permite al usuario
crear y estructurar secciones, p谩rrafos, encabezados, enlaces y elementos
de cita en bloque (blockquotes) para p谩ginas web y aplicaciones.
HTML no es un lenguaje de programaci贸n, lo que significa que no tiene la
capacidad de crear una funcionalidad din谩mica. En cambio, hace posible
organizar y formatear documentos, de manera similar a Microsoft Word.
TIPOS DE ETIQUETAS
En HTML y CSS tenemos diferentes tipos de etiquetas cada uno con un prop贸sito en
particular una
etiqueta se compone de dos maneras.
| ESTRUCTURA DE ETIQUETAS | |||||
| Etiquetas que solo tienen apertura | Etiqueta que tiene una apertura y un sierre | ||||
| Este tipo de etiquetas conm煤nmente se utilizan para
indicar una direcci贸nu origen se componen por argumento u opciones tales como src href. |
Este tipo de etiquetas conm煤nmente se
utiilizan para
encerrar un contenido tales como texto, img,etc. |
||||
馃摍Lista de etiquetas dirigidas al texto馃摍
| Etiqueta | Funci贸n | Propiedad CSS |
| < p ></p> | Se utiliza para distribuir un texto en parrafo. | -Font-family, Font-size, color,
width, height, padding, margin, borde, background, background-color. |
| <h1></h1> | Todas las etiquetas (h1,h2,h3,h4,h5,h6) nos
sirven para colocar un t铆tulo. |
-Font-family, font-size, color, widht,
height,padding, margin, border, background,background-color. |
| <br> | Produce un salto de l铆nea en el texto. |
馃摌 Lista de etiquetas dirigidas a objetos馃摌
| Etiqueta | Funci贸n | Propiedades CSS |
| < img> | Se utiliza para insertar una imagen. | width, height, border, border-radius,
background, background-color. |
| <header > | Puede contener algunos elementos de encabezado,
as铆 como
tambi茅n un logo,
f贸rmulario de b煤squeda,
un nombre de usuario, etc. |
-background-color, border, border-radius, hover. |
馃摍Lista de etiquetas para definir el documento馃摍
| Etiqueta | Funci贸n | Propiedades CSS |
| <!DOCTYPE> | Define el tipo de documento. | |
| <title></title> | El contenido dentro de ella ser谩 un t铆tulo. | |
| <body></body> | Representa el contenido del documento. | background-color, background-image , margin, widht, height, padding. |
| <head></head> | Contiene informaci贸n que describe el documento de la p谩gina web. | |
| <meta> | Permiten incluir cualquier informaci贸n relevante sobre la propia p谩gina. Su atributo m谩s utilizado es "charset" |
馃摌 Etiquetas para una Lista馃摌
| Etiqueta | Funci贸n | Propiedades CSS |
| <ol></ol> | Hace referencia a una lista ordenada. | background-color,
font-size, border,
border-radius. |
| <li></li> | Son los elementos de la lista. | color, background-color, font-family,
font-size, border, border-radius. |
| <ul></ul> | Sirve para realizar una lista desordenada. | background-color,
font-size, border,
border-radius. |
馃摍Etiquetas para realizar una Tabla馃摍
| Etiqueta | Funci贸n | Propiedades CSS |
| <table></table> | Nos sirve para poder crear una tabla. | background-color, margin, padding. |
| <tr></tr> | Sirve para colocar filas. | color, border, border-radius. |
| <td></td> | Nos sirve para colocar columnas en la tabla. | color, font-family, font-size,
background-color. |
馃摌 Lista de etiquetas para poder colocar links馃摌
| Etiqueta | Funci贸n | Propiedades CSS |
| <a> </a> | Sirve para colocar links de p谩ginas, im谩genes,
documentos, etc. |
color, background-color,
text-decoration, font-family, font-size. |
| Atributo href "<a href="link"></a> | Nos sirve para colocar la dirrecci贸n de el link. | |
| <link> </link> | permite realizar la carga y establecer la relaci贸n existente entre el documento web actual y un recurso externo. |
馃摍Lista de etiquetas para crear un menu馃摍
| Etiqueta | Funci贸n | Prpiedades CSS |
| <header></header> | Se colocan encabezados, t铆tulos, menus de inicio, etc. | background-color,
border-radius, border, margin, padding, width, height. |
| <ul></ul> | Se utiliza para crear una lista desordenada. | background-color,
font-size, border,
border-radius. |
| <a></a> | Sirve para colocar links de p谩ginas, im谩genes,
documentos, etc. |
color, background-color,
text-decoration, font-family, font-size. |
| Atributo href "<a href="link"></a> | Nos sirve para colocar la dirrecci贸n de el link. | |
| <span></span> | Es un contenedor en l铆nea. Sirve para aplicar
estilo al texto o agrupar elementos en l铆nea. |
background-color, color,
fon-family, font-size. |
馃摌 Lista de etiquetas para crear un F贸rmulario馃摌
| Etiqueta | Funci贸n | Prpiedades CSS |
| <form></form> | Sirve para poder colocar un f贸rmulario. | margin, padding, background-color. |
| <label></label> | Sirve para poder colocar un t铆tulo en el f贸rmulario. | font-family, font-size, color, background-color. |
| <input></input> | Sirve para colocar una entrada de texto. | font-size, font-family,background-color, color. |
| Atributo "type" <input type="text"></type> | Sirve para especificar que es lo que se debe colocar,
texto,gmail, etc. |
|
| <button></button> | Sirve para poder colocar un bot贸n. | font-family, font-size, color, background-color. |
馃摍Lista de etiquetas Flexbox dirigidas a Maquetaci贸n馃摍
| Etiqueta | Funci贸n | Propiedades CSS |
| <header></header> | Sirve para colocar encabezados, t铆tulos, etc. | background-color,
border-radius, border, margin, padding, width, height. |
| <nav></nav> | Sirve para poder colocar todo el navegador. | background-color, margin, padding. |
| <section></section> | Sirve para poder colocar elementos en secciones. | background-color, background-image, color, margin, padding, height, width. |
| <article></article> | Representa una composici贸n auto-contenida en un documento. | background-color, margin, padding, height, width. |
| <footer></footer> | Representa un pie de p谩gina, para el contenido de secci贸n mas cercano
o elemento ra铆z de secci贸n. |
background-color, color, margin, padding, height, width. |
| <div></div> | Sirve para crear secciones o agrupar contenidos. | background-color, color, margin, padding, height, width. |
馃摌 Connexi贸n html a css馃摌
Colocamos la etiqueta <link>, luego colocamos dentro de la etiqueta un atributo "rel" y dentro de ese rel entre "",
colocamos la palabra "stylesheet". Luego colocamos otro
atributo junto a "rel", el cual es "href" y dentro de ese atributo
colocamos el nombre de nuestro css. Ejemplo:
| <link rel="stylesheet"href="css/design.css">. |
驴Qu茅 es CSS?
CSS (en ingl茅s Cascading Style Sheets) es lo que
se denomina lenguaje de hojas de estilo en cascada y se usa
para estilizar elementos escritos en un lenguaje de marcado
como HTML. CSS separa el contenido de la representaci贸n visual
del sitio.La relaci贸n entre HTML y CSS es muy fuerte. Dado que
HTML es un lenguaje de marcado (es decir, constituye la base de
un sitio) y CSS enfatiza el estilo (toda la parte est茅tica de
un sitio web), van de la mano.
CSS no es t茅cnicamente una necesidad, pero no querr谩s tener un
sitio que solo tenga HTML, ya que se ver铆a completamente desnudo.
馃摍Lista de propiedades css dirigidas a texto馃摍
| Propiedad | Funci贸n | Valores CSS |
| color | Inserta un color al texto mediante el
nombre del color, o en este caso un c贸digo de color. |
C贸digo de color: #fffff
Nombre del color: orange. |
| font-size: 1px | Espec铆fica el tama帽o en que queremos que
este nuestro texto. |
valores p铆xeles: 0px;
valores en porcentaje:0%; |
| text-indent | Desplazamiento de la primera l铆nea del
texto. Sus valores son longitud y porcentaje. |
inherit |
| text-aling | Alineamiento del texto. Sus valores son:left,
right, center y justify. |
center, end,inherit, justify,
justify-all, left, martch-parent, right, start. |
馃摌 Listado de propiedades dirigidas a objetos馃摌
| Propiedad | Funci贸n | Valores CSS |
| width: 100px; | Puede anchar la imag茅n. | valores p铆xeles: 0px;
valores en porcentaje:0%; auto. |
| height | Puede estirar la imag茅n. | valores p铆xeles: 0px;
valores en porcentaje:0%; auto. |
| border | Coloca un borde al elemento escogido. | valores p铆xeles: 0px;
valores en porcentaje:0%; |
| border-radious | Puede redondear el borde de las imagenes. | valores p铆xeles: 0px;
valores en porcentaje:0%; |
| background-color | Coloca un colo de fondo al elemento. | C贸digo de color: #fffff
Nombre del color: orange. |
馃摍Lista de propiedades dirigidas para Tablas馃摍
| Propiedad | Funci贸n | Valores CSS |
| width | Define el ancho de un elemento. | valores p铆xeles: 0px;
valores en porcentaje:0%; auto. |
| height | Especif铆ca la altura del 谩rea de contenido de un elemento. | valores p铆xeles: 0px;
valores en porcentaje:0%; auto. |
| padding | Es la distancia desde el borde de un elemento hasta su contenido. | valor en pixeles:0px; margin-top, right, left, bottom. |
| margin | Es la distancia entre un elemento y otro (desde el borde del elemento hacia
afuera). |
valores p铆xeles: 0px;
valores en porcentaje:0%; auto. |
| border | Define el borde de un elemento, su color, su estilo y grosor. | valores p铆xeles: 0px;
valores en porcentaje:0%; |
馃摌 Lista de propiedades (Flexbox) css dirigidas a Maquetaci贸n馃摌
| Propiedad | Funci贸n | Valores CSS |
| display | Espec铆fica si un elemento es tratado bloc on line element y el dise帽o por sus hijos. | block, flex, inherit, flow-root, contents, grid, inline, none, table. |
| flex | El atributo "flex" indica la capacidad de un elemento flexible para alterar sus dimensiones. | |
| flex direction | Espec铆fica como colocar el objetos flexibles en el contenedor flexible. | column, column-reverse, row, row-reverse. |
| row | El atributo "row" Define un rango de tama帽o, mayor o igual min y menor o igual que max | |
| Justify content | Define como el navegador distribuye el espacio entre el alredeedor con los items flex. | center, flex-end, flex-star, space-around, space-between. |
馃摍Lista de propiedades css dirigidas a Menu馃摍
| Propiedad | Funci贸n | Valores CSS |
| border-radius | Permite colocar un border al objeto. | valores p铆xeles: 0px;
valores en porcentaje:0%; |
| display | Espec铆fica si un elemento es tratado
bloc on line elemento y el dise帽o por sus hijos. |
block, flex, inherit, flow-root,
contents, grid, inline, none, table. |
| text-decoration | Se usa para establecer le formato de texto. | inherit, line-though, none,
overline, underline. |
| transition | Permite establecer un tiempo a los
cambios de animaci贸n de las propiedades css. |
valores en segundos: 0s |
| hover | Coincide cuando el usuario interact煤a con un
elemento con un dispositivo se帽alador, pero se activa cuando el usario se desplaza por el elemento con el cursor. |
widht, height, color,
background-color, padding, transition. |
| Cursor | Permite seleccionar un puntero entre los disponibles en el sistema operativo. | alias, all-scroll, auto, cell,
col-resize, context-menu, copy, crosshair, default. |
| :root | selecciona el elemento ra铆z de un 谩rbol que representa el documento. | background-color, color, height, width. |
馃摌 Lista de propiedades css dirigidas a Imagenes馃摌
| Propiedad | Funci贸n | Valores CSS |
| alt | Si una imagen no se puede mostrar por alguna
raz贸n, el atributo ALT proporciona texto alternativo para mostrar en su lugar. |
|
| object-fit | Indica c贸mo el contenido de un elemento reemplazado,
por ejemplo un <img> o <video> , deber铆a redimensionarse para ajustarse a su contenedor. |
contain, cover, fill,
none, scale-down. |
| object-position | Sirve para definir c贸mo va a adaptar un elemento
de imagen o v铆deo su contenido a su contenedor. |
bottom, center, left,
right, top. |