Mr Mejia

DICCIONARIO DE ETIQUETAS

En HTML tenemos diferente tipos de etiquetas cada uno con un propósito en particular una etiqueta se puede componerse de dos maneras.

1. Etiquetas que tienen una apertura y un cierre : Este tipo de etiqueta comúnmente se utilizan para indicar una dirección u origen se componen por argumento u opciones tales como src href.

2. Etiquetas que solo se aperturan : Este tipo de etiquetas comúnmente se utilizan para encerrar un contenido tales como texto, img, entre otros.

📌Lista de etiquetas dirigidas al texto.📌

🌵<h>

Es el elemento HTML utilizado, de manera habitual, para identificar la cabecera más importante en una página web. Las propiedades de css que se puedes aplicar son Text-aling, font-family, font-size, color, backgroud-color

Ejemplo: <h1> </h1>
Ejemplo: <h2> </h2>
Ejemplo: <h3> </h3>
Ejemplo: <h4> </h4>
Ejemplo: <h5> </h5>
Ejemplo: <h6> </h6>
🌵<p></p>

El elemento HTML p inserta un párrafo en el documento. Etiquetas de css que se pueden aplicar Text-aling, font-family, font-size, color, backgroud-color

Ejemplo: <p>La salud es uno de los temas trascendentes de las sociedades modernas y probablemente uno de los más valorados por el ciudadano. Especialmente cuando la hemos perdido. Como el refrán de Santa Bárbara, de la que tan sólo nos acordamos cuando truena. </p>
🌵<title></title>

define el título del documento que se muestra en la barra de título del navegador o en la pestaña de una página.

Ejemplo: <title>Salud</title>

📌Listado de etiquetas dirigidas a objetos.📌

🍁<div><div>

En un documento HTML el elemento "div" permite crear divisiones, también llamadas secciones o zonas. Las divisiones se utilizan para agrupar elementos. Las propiedades de css que se puedes aplicar son >Text-aling, font-family, font-size, color, backgroud-color, margin, padding, height, widht

Ejemplo: <div class ="caja_1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
🍁<nav><nav>

es un contenedor para enlaces de navegación, que se supone proveen formas de acceder a las secciones del sitio web, >Text-aling, font-family, font-size, color, backgroud-color, margin, padding, height, widht

Ejemplo: <Nav class ="caja_1">
<nav></nav>
<nav></nav>
<nav></nav>
<nav></nav>
</nav>
🍁<section><section>

La etiqueta section sirve para represetnar una seccion dentro de nuestra página Web Las propiedades de css que se puedes aplicar son Text-aling, font-family, font-size, color, backgroud-color

Ejemplo: <section class ="secction_1">
<section></section>
<section></section>
<section></section>
<section></section>
</section>
🍁<img>

El elemento img representa a una imagen, la ubicación de dicho recurso externo debe especificarse en el atributo src Las propiedades de css que se puedes aplicar son gheight, width, border-radius, padding, margin, border

Ejemplo: <img src="images/salud.jpg">
🍁<header>

El elemento header contiene al encabezado de una sección o documento, donde se colocan habitualmente los encabezados, los vínculos de navegación, los formularios de búsqueda, los logos, las tablas de contenidos, las introducciones, etc.

Ejemplo: <header>
<h1>Mi nombre es Maria </h1>;
</header>
🍁<footer>

El elemento footer representa al pie de una sección o documento, donde los autores habitualmente colocan firmas, información acerca del autor, información de licencias, documentos relacionados Text-aling, font-family, font-size, color, backgroud-color, width, height

Ejemplo: <footer> <h1>Maria Reneé Mejia</h1> </footer>
🍁<link>

Esta etiqueta nos ayuda a poder crear relacion con otros documentos y recursos externos.

Ejemplo: <link rel="stylesheet" href="css/index.css">
🍁<label>

Esta etiqueta representa una etiqueta que puede ser asociada a un control de formular

Ejemplo: <form>
<p> <label> <imput="text name="usuarios"> <label> </p>
</form>
🍁<form>

Esta etiqueta nos sirve para creacion de formularios

Ejemplo: <form>
<p> <label> <imput="text name="usuarios"> <label> </p>
</form>
🍁<table></table>

El elemento table representa una tabla.En lo que respecta al código, una tabla consiste básicamente de un grupo de filas que contiene, cada una, a un grupo de celdas.font-family, font-size, color, backgroud-colorz, width, height

Ejemplo: <table>
<tr>
<Beneficios>
<Caracteristicas>
<Tipos>
</tr>
</table>
🍁<tr></tr>

El elemento tr representa a una fila de una tabla ( table ). En HTML , las tablas están formadas por un conjunto de filas donde cada una contiene a un número de celdas. Por lo tanto, este elemento se encuentra habitualemente conteniendo a una o más celdas.width, text-aling, border,border-collapse

Ejemplo: <tr>
<td>Tipos de salud</td>
<td>Beneficios de la salud</td>
</tr>
🍁<td></td>

El elemento td representa a una celda de datos de una tabla (table). En HTML, las tablas están formadas por un conjunto de filas donde cada una contiene a un número de celdas. width, text-aling, border,border-collapse>

Ejemplo: <tr>
<td>Tipos de salud</td>
<td>Beneficios de la salud</td>
<td>Clasificacion de la salud</td>
<td>Medicación</td>
</tr>
🍁<ol></ol>

El elemento ol representa una lista ordenada de ítems que, en contraste con las listas no ordenadas.Text-aling, font-family, font-size, color,list-style

Ejemplo: <ol>
<li>Vitamina A</li>
<li>Vitamina C</li>
</ol>
🍁<ul></ul>

El elemento HTML ul inserta una lista desordenada, usualmente mostrados con una viñeta en la márgen izquierda. Text-aling, font-family, font-size, color,list-style

Ejemplo: <ul>
<li>Vitamina B</li>
<li>Vitamina E</li>
</ul>
🍁<a></a>

Con la etiqueta a pueden realizarse enlaces hacia documentos externos de cualquier tipo, generalmente es usada para definir enlaces hacia otras páginas web.font-family, font-size, backround-color,text-decoration, display, padding, margin,border-radius, width

Ejemplo: <a>href="#">hola mundo</a>

📌Listado de propiedades css dirigidas a textos.📌

🌼color: #ffffff;

La propiedad de CSS color selecciona el valor de color de primer plano del contenido de elemento de texto y decoraciones de texto, colocandole el codigo de color que deseamos.

Ejemplo: color:#182126;{
}
Ejemplo: color: white;{
}
Ejemplo: color: rgba(128, 128, 128, 0.5);{
}
🌼text-decoration: none;

La propiedad de CSS text-decoration sirve para poner quitar el subrayado de un texto, la cula se le indica al padre para que la etiqueta haga el cambio.

Ejemplo: text-decoration: none;{
}
🌼font-size: 1px;

La propiedad font-size permite establecer el tamaño de letra del texto, el tamaño de la fuente se mide en pixeles.

Ejemplo: Font-size:20px;{
}
🌼font-family:

La propiedad font-size permite establecer el tamaño de letra del texto, el tamaño de la fuente se mide en pixeles.

Ejemplo: Font-family: monospace;{
}

📌Listado de propiedades css dirigidas a objetos.📌

🍀width:

La propiedad CSS width especifica la anchura del area de contenido de un elemento.

Ejemplo: width:20px;{
}
🍀heigh:

La propiedad height establece la altura de un elemento mediante un valor numérico, esta tambien se mide por piexeles.

Ejemplo: height:100px; {
}
🍀margin;

La propiedad CSS margin establece el margen para los cuatro lados. Es una abreviación para evitar tener que establecer cada lado por separado con las otras propiedades de margen: margin-top , margin-right , margin-bottom y margin-left .

Ejemplo: margin:10px 10px 10px 10px;{
}
Ejemplo: margin-top:10px 10px 10px 10px;{
}
Ejemplo: margin-right:10px 10px 10px 10px;{
}
Ejemplo: margin-left:10px 10px 10px 10px;{
}
🍀padding;

La propiedad CSS padding establece el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde (border) y se mide en pixeles.

Ejemplo: Padding:10px 20px 10px 200px;{
}
Ejemplo: Padding-top:10px 20px 10px 200px;{
}
Ejemplo: Padding-right:10px 20px 10px 200px;{
}
Ejemplo: Padding-left:10px 20px 10px 200px;{
}
🍀Border

La propiedad border es una forma rápida para establecer el ancho, estilo y el color del borde izquierdo de un elemento.

Ejemplo: Border="1";{
}
Ejemplo: Border-top="1";{
}
Ejemplo: Border-right="1";{
}
Ejemplo: Border-radius="1";{
}
🍀Backgroud:

La propiedad backgroud en css tiene la funcion de darle fondo a la pagina desde una color o una imagen.

Ejemplo: Backgroud-color= white;{
}
Ejemplo: background-image: url(../img/banner.jpg);{
}
🍀display-block;

Formalmente la propiedad display establece los tipos de visualización interna y externa de un elemento.

Ejemplo: display: block;{
}
🍀flex-direction:

Esta propiedad nos sirve para definir la dirección del flujo de colocación de los elementos y esta divida por :

Ejemplo: flex-direction: row-reverse; {
}
➴ row-reverse se mantendrá el despliegue a lo largo de la fila, sin embargo el inicio y final quedarán al revés del original.
Ejemplo: flex-direction: row;{
}
➴ Indica que los elementos se colocan en una fila, uno al lado del otro, de izquierda a derecha.
Ejemplo: flex-direction: column;{
}
➴ Se colocan uno debajo del otro, en orden los primeros arriba.
Ejemplo: flex-direction: column-reverse;{
}
➴ se colocan en una columna, pero los primeros aparecerán abajo.
🍀justificy-content:

Esta propiedad de css se utiliza para alinear los ítems de forma horizontal

Ejemplo: justificy-content: center;{
}
Ejemplo: justificy-content: flex start;{
}
Ejemplo: justificy-content: flex-end;{
}
Ejemplo: justificy-content: space between;{
}
Ejemplo: justificy-content: space around;{
}
🍀Object-position:

se utiliza para alinear cualquier elemento reemplazado seleccionado dentro del cuadro que lo contiene.

Ejemplo: object-position: bottom;{
}
Ejemplo: object-position: center;{
}
Ejemplo: object-position: left;{
}
Ejemplo: object-position: right;{
}
Ejemplo: object-position: top;{
}
🍀flex-wrap

especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas.

Ejemplo: flex-wrap: nowrap;{
}
Ejemplo: flex-wrap: wrap;{
}
Ejemplo: flex-wrap: nwrap-reverse;{
}
🍀box-sizing

El ancho de un elemento se altera si se le aplica un borde o un padding. Eso es porque la anchura del elemento que tu especificas con CSS, pero con esta propiedad la caja no pierde su tamañp.

Ejemplo: box-sizing: border-box;{
}
Ejemplo: box-sizing: content-box;{
}
🍀Hover

coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor

Ejemplo: a:hover {
backgroud-color: orange;
}