📌 ETIQUETAS DIRIGIDAS AL TEXTO
📋TITULOS
Los títulos son aquellas secciones que son relevantes para describir o inicializar un tema en HTML podemos tener tanto títulos principales como subtítulos en.
🍓para head
|
<title> </title>
|
Este permite crear un título que se visualizara en la pestaña del navegador, el título de esta página por ejemplo es el nombre del creador “Adriana”.
|
🍒para body
- <h1> </h1>
|
Esta etiqueta se utiliza para colocar un título de nivel 1.
|
|
<h2> </h2>
|
Esta etiqueta se utiliza para colocar un título de nivel 2.
|
|
<h3> </h3>
|
Esta etiqueta se utiliza para colocar un título de nivel 3.
|
|
<h4> </h4>
|
Esta etiqueta se utiliza para colocar un título de nivel 4.
|
|
<h5> </h5>
|
Esta etiqueta se utiliza para colocar un título de nivel 5.
|
|
<h6> </h6>
|
Esta etiqueta se utiliza para colocar un título de nivel 6.
|
📋PARRAFOS
La etiqueta dirigida para crear párrafos en HTML es la etiqueta p, recuerda que si deseas realizar varios párrafos tendrás que insertar varias de estas etiquetas.
🍒para body
|
<p> </p>
|
Con esta etiqueta puedes crear un párrafo, el tamaño de este dependerá de la caja padre en que se encuentre el párrafo puede ser tan largo como tan corto según su contenedor.
|
📋PARRAFOS
son las que nos permite controlar el texto de bloque.
🍒para body
|
<!--...-->
|
Define un comentario dentro del codigo.
|
|
<p></p>
|
Define una parte que debe mostrarse como un parrafo.
|
|
<a></a>
|
Representa un hiperenlace, a este le podemos agregar un nombre.Tenemos que utilizar el atributo href.
|
📋FORMULARIOS
Son el soporte en el que se integran los botones y las areas de texto que se utilizan para que los usuarios introduzcan sus datos o que puedan elegir entre varias opciones.
|
<Form></Form>
|
Define un formulario.
|
|
<label></label>
|
Representa el titulo del elemento de control de formulario.
|
|
<input></input>
|
Se usa para crear controles interactivos que reciben datos del usuario(casillas).
|
|
<button></button>
|
Representa un boton.
|
📋TABLAS DE CONTENIDO
Nos permite almacenar los datos de forma ordenada.
|
<table></table>
|
Representa datos con mas de una dimension.
|
|
<tr></tr>
|
Representa una fila de celdas de una tabla.
|
|
<td></td>
|
Representa una celda de datos en una tabla.
|
📋LISTAS DE CONTENIDO
Son estructuras de tipo bloque, pero pueden crearse en el interior de otras listas.Estas pueden ser ordenadas y no ordenadas.
lista ordenada
|
<ol></ol>
|
Genera una lista ordenada.
|
<li></li>
|
Indica que se trata de un elemento de una lista, se genera de forma automatica
|
lista no ordenada
|
<ul></ul>
|
Genera una lista no ordenada.
|
<li></li>
|
Indica que se trata de un elemento de una lista, se genera de forma automatica.
|
📌ETIQUETAS DIRIGIDAS A OBJETOS
📋Estructuras:
Las etiquetas de estructura son de tipo objeto ya que pueden ser redimensionadas tanto en ancho y en alto estas etiquetas también son conocidas como cajas.
🍓para body
|
<header> </header>
|
Utilizada para definir un encabezado de página, común mente se coloca en su interior la etiqueta van, otra etiqueta de tipo caja.
|
|
<nav> </nav>
|
Esta etiqueta está dirigida al menú de navegación del sitio web común mente se encuentra dentro de la etiqueta header.
|
|
<section> </section>
|
Los sitios web están compuestas por múltiples páginas y cada página está compuesta por un header y un número indefinido de secciones en las que se tratan diferentes temas.
|
|
<article> </article>
|
Esta etiqueta es complementaria de la caja section utilizada para definir sus parte común mente es sustituida el objeto mismo o la etiqueta div.
|
|
<aside> </aside>
|
esta etiqueta es de poco uso, se implementa cuando deseas agregar un apartado a tu sitio web como la publicidad lateral de las paginas comerciales.
|
|
<footer> </footer>
|
Esta etiqueta se utiliza para colocar un título de nivel 6.
|
📋Parrafos:
Etiqueta que ocupa el apartado final de una página web esta contiene en general información contactos redes sociales información esencial del sitio.
🍓para body
|
<p> </p>
|
Con esta etiqueta puedes crear un párrafo, el tamaño de este dependerá de la caja padre en que se encuentre el párrafo puede ser tan largo como tan corto según su contenedor.
|
📋IMAGENES
sirve para insertar recursos visuales.
<img>
|
se utiliza para colocar una imagen acompañado del atributo src que indica la direccion de la imagen.
|
📌CONECTAR UN CSS EN HTML
Para enlazar una hoja de estilo utilizamos la etiqueta <link> se coloca en la cabecera HEAD del documento. Se coloca el argumento rel="stylesheet" seguido del argumento href="css/css.css (carpeta donde se encuentra el documento/css.css) para una hoja de estilo en cascada. Esta etiqueta solo se apertura.
📋LISTADO DE ETIQUETAS DIRIGIDAS A OBJETOS
Estructuras
Las etiquetas de estructura son de tipo objeto ya que pueden ser redimensionadas tanto en ancho y en alto estas etiquetas también son conocidas como cajas.
| Etiqueta |
Descripción |
| <html> </html> |
El texto en una página web está «marcado» con estos códigos para dar instrucciones al navegador web sobre cómo mostrar el texto. |
| <header> </header> |
Utilizada para definir un encabezado de página. |
| <nav> </nav> |
Esta etiqueta está dirigida al menú de navegación del sitio web común mente se encuentra dentro de la etiqueta header. |
| <div> </div> |
Sirve para crear secciones o agrupar contenidos. Crea una caja en bloque. |
| <section> </section> |
Los sitios web están compuestas por múltiples páginas y cada página está compuesta por un header y un número indefinido de secciones en las que se tratan diferentes temas. |
| <footer> </footer> |
Representa un pie de página para el contenido de sección más cercano. |
| <head> </head> |
Sirve para delimitar la cabecera del documento. |
| <body> </body> |
Sirve para delimitar el cuerpo del documento. |
📌PROPIEDADES CSS DIRIGIDAS A TEXTO
Las propiedades de texto son las que nos permiten controlar el texto como bloque.
| Propiedad |
Descripción |
valores |
| text-aling |
Alineamiento del texto |
left | right | center | justify |
| text-decoration |
Indica el tipo de subrayado (decoración) |
none | underline | overline | line-through |
| text-transform |
Transformación a mayúsculas / minúsculas |
capitalize | uppercase | lowercase | none |
| text-indent |
Desplazamiento de la primera línea del texto |
longitud | porcentaje |
| letter-spacing |
Espacio entre caracteres |
normal | longitud |
| word-spacing |
Espacio entre palabras |
normal | longitud |
Fuentes
Son las que permiten controlar el tamaño, el tipo, el grosor o el estilo de las letras, entre otras cosas.
| Propiedad |
Descripción |
valores |
| font-family |
Familias de fuentes |
nombre-familia|nombre-familia-genérica| * |
| font-style |
Estilo de la fuente |
normal | italic | oblique |
| font-size |
Tamaño de la fuente |
xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | longitud | porcentaje |
| font-variant |
Convierte a mayúsculas manteniendo un tamaño inferior |
normal | small-caps |
| font-weight |
Anchura de los caracteres. Normal = 400, Negrita = 700 |
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Colores y fondo
Nos permite dar un color. Los valores de los colores se pueden definir mediante su nombre, en código hexadecimal o mediante sus valores en el formato: RGB
| Propiedad |
Descripción |
valores |
| color |
Color del texto |
Nombre:black | HEX:#000000 | RGB:0,0,0 |
| background-color |
Color de fondo |
Nombre:white | HEX:#FFFFFF | RGB:255,255,255 |
| background-image |
Imagen de fondo |
url(…) | none |
| background-repeat |
Repetición de la imagen de fondo |
repeat | repeat-x | repeat-y | no-repeat |
| background-attachment |
Desplazamiento de la imagen de fondo |
scroll | fixed |
| background-position |
Posición de la imagen de fondo |
percentage | length | left | center | right |
| background-size |
Tamaño de la imagen de fondo |
valor |
Listas de contenido
Son las que nos permiten controlar los estilos de los marcadores
| Propiedad |
Descripción |
valores |
| list-style-type |
Estilo aplicable a los marcadores visuales de las listas |
disc | circle | square | decimal | none |
| list-style-image |
Imagen aplicable a los elementos de las listas |
url(“…”) | none |
| list-style-position |
Posición dentro de la lista de los elementos marcadores de las listas |
inside | outside |
| list-style |
Permite establecer el estilo de la lista, la imagen y/o la posición |
list-style-type | list-style-position | list-style-image |
Tablas de contenido
Nos permite controlar el borde de la tabla.
| Propiedad |
Descripción |
valores |
| border-collapse |
Selección del modelo de los bordes |
collapse | separate |
| border-spacing |
Espaciado entre los bordes de celdas adyacentes |
longitud |
| caption-side |
Posición del título respecto la tabla |
top | bottom |
| table-layout |
Formato de las celdas, filas y columnas |
auto | fixed |
| empty-cells |
Visibilidad de los bordes de celdas sin contenido |
show | hide |
📌 PROPIEDADES CSS DIRIGIDAS A OBJETOS
Cualquier elemento incluido en un documento HTML dispone de una estructura tipo caja que se puede modificar usando las propiedades CSS. Las propiedades más importantes de las cajas o contenedores son las siguientes: margin, border y padding.
Las propiedades operan en el siguiente orden: superior, derecha, inferior e izquierda.
Margin
Ancho de los márgenes.
| Propiedad |
Descripción |
valores |
| margin-top |
Tamaño del margen superior |
longitud | porcentaje | auto |
| margin-right |
Tamaño del margen derecho |
longitud | porcentaje | auto |
| margin-bottom |
Tamaño del margen inferior |
longitud | porcentaje | auto |
| margin-left |
Tamaño del margen izquierdo |
longitud | porcentaje | auto |
| margin |
Tamaño del margen |
longitud | porcentaje (1...4) |
Padding
Tamaño del relleno
| Propiedad |
Descripción |
valores |
| padding-top |
Tamaño del relleno superior |
longitud | porcentaje |
| padding-right |
Tamaño del relleno derecho |
longitud | porcentaje |
| padding-bottom |
Tamaño del relleno inferior |
longitud | porcentaje |
| padding-left |
Tamaño del relleno izquierdo |
longitud | porcentaje |
| padding |
Tamaño del relleno |
longitud | porcentaje (1...4) |
Bordes
Tamaño, color y estilo del borde.
| Propiedad |
Descripción |
valores |
| border |
Ancho, estilo y color para los bordes |
border-width | border-style | border-color |
| border-radius |
Curvatura del borde |
longitud | porcentaje (1...4) |
| border-style |
Estilo del borde |
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset (1...4) |
| border-color |
Color del borde |
color | transparent (1...4) |
| border-width |
Anchura del borde |
thin | medium | thick | longitud (1...4) |
📌PROPIEDADES CSS DIRIGIDAS A ELEMENTOS
Tipos de elementos
Para comenzar, hay que saber que cada etiqueta HTML tiene un tipo de representación visual en un navegador, lo que habitualmente se suele denominar el tipo de caja.En principio, se parte de dos tipos básicos: inline y block.
| Valor |
Denominación |
Descripción |
| inline |
Elemento en línea |
El elemento se coloca en horizontal (un elemento a continuación del otro). |
| block |
Elemento en bloque |
El elemento se coloca en vertical (un elemento encima de otro). |
Otros tipos de elementos
Atributos más importantes que puede tomar la propiedad CSS display:
| Tipo de caja |
Descripción |
| block |
Se apila en vertical. Ocupa todo el ancho disponible de su etiqueta contenedora. |
| inline |
Se coloca en horizontal. Se adapta al ancho de su contenido. Ignora width o height. |
| inline-block |
Combinación de los dos anteriores. Se comporta como inline pero no ignora width o height. |
| flex |
Utiliza el modelo de cajas flexibles Flexbox. Muy útil para diseños adaptables. |
| inline-flex |
La versión en línea (ocupa sólo su contenido) del modelo de cajas flexibles flexbox. |
| none |
Hace desaparecer visualmente el elemento, como si no existiera. |
| Valor |
Descripción |
| visible |
El elemento es visible. Valor por defecto. |
| hidden |
El elemento no es visible pero sigue ocupando su espacio y posición. |
| collapse |
Sólo para tablas. El elemento se contrae para no ocupar espacio. |
📋Flexbox
Es un sistema de elementos flexibles, en la que los elementos HTML se adaptan y colocan automáticamente y es más fácil personalizar los diseños. Está especialmente diseñado para crear, mediante CSS, estructuras de una sóla dimensión.