Gabriela Salazar š©š»āš»
Tipos De Etiquetas
En HTML y CSS tenemos diferentes tipos de etiquetas cada uno con un
propĆ²sito en particular una etiqueta se puede componerse de dos maneras.
| Estructura De Etiquetas |
| Etiquetas que solo se aperturan |
Etiquetas que tienen una apertura y cierre |
|
Este tipo de etiqueta comunmente se utilizan para indicar una
direcciĆ²n u origen, se componen por un argumento u opciones tales
como src y href.
|
Este tipo de etiquetas comunmente se utilizan para encerrar un
contenido tales como texto img entre otros.
|
TĆtulos
Los tƬtulos son aquellas secciones que son relevantes para describir o
iniciar un tena en HTML podemos tener tanto tƬtulos principales como
subtitulos
Head
| Etiqueta |
DescripciĆ³n |
Atributo |
| <title> </title> |
se usa para poner un titulo en la pestaƱa del navegador. |
<title>SofĆa</title> |
Body
SubtĆtulos para una pĆ”gina web, que van dese <h2>hasta</h6>.
| Etiqueta |
DescripciĆ³n |
Atributo |
| <h1> </h1> |
Se utiliza para colocar un tĆtulo. |
PƔgina
|
| <h2> </h2> |
Se utiliza para colocar un tĆtulo. |
pƔgina
|
| <h3> </h3> |
Se utiliza para colocar un tĆtulo. |
PƔgina
|
| <h4> </h4> |
Se utiliza para colocar un tĆtulo. |
PƔgina
|
| <h5> </h5> |
Se utiliza para colocar un tĆtulo. |
PƔgina
|
| <h6> </h6> |
Se utiliza para colocar un tĆtulo. |
PƔgina
|
PƔrrafos
Son los que nos permiten realizar unidades mĆnimas de un texto compuesto
por una o mƔs oraciones que desarrollan una idea.
Para body
| Etiqueta |
DescripciĆ³n |
Atributo |
| <!--...--> |
Permite dejar un comentario en la cĆ³digo sin que sea leĆdo por este.
|
!--notas importantes-- |
| <p> </p> |
Define una parte que debe mostrarse como un pƔrrafo. |
este es un glosario con una cantidad variada de etiquetas que nos
seĆ” de mucho uso
|
Hipervinculos
Es un enlace que conduce a un texto, imagen, video o algĆŗn otro
contenido de formato diverso, ya sea dentro o fuera de la pƔgina
Body
| Etiqueta |
DescripciĆ³n |
Atributo |
| <a> </a> |
Conecta con un hipervinculo, tambiƩn se le puede agregar un nobre y
que solo se vea este pero igual te redireccione href.(href="")
|
Gitgub |
Tablas
Oganiza informaciĆ³n en cuadros formando las tablas con los datos
asignados.
Body
| Etiqueta |
DescripciĆ³n |
atributo |
| <table> </table> |
Crea una taba. |
Esto. |
| <tr> </tr> |
Crea las casillas de las tablas. |
es una. |
| <td> </td> |
Es para colocar la informaciĆ³n en las casillas. |
Tabla. |
LISTADOS
Los listados son enumeraciones simples y concisas de informaciĆ³n o datos
importantes.
Body
listado desordenado
| Etiqueta |
DescripciĆ³n |
Atributo |
| <ul> </ul> |
Crea el lisato desordenado. |
- Naranja
- Morado
- Verde
|
| <li> </li> |
Es lo que nos dice que es un lisato el que se esta creando. |
- Verde
- Naranja
- Morado
|
Listado ordenada
| Etiqueta |
DescripciĆ³n |
Atributo |
| <ul> </ul> |
Crea un listado ordenado. |
|
| <li> </li> |
Es lo que nos dice que se trata de un listado. |
|
LISTA 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.
Body
| Etiqueta |
DescripciĆ³n |
| <header> </header> |
Es para generar el encabezado de la pƔgina. |
| <nav> </nav > |
Esta es para el menĆŗ de navegaciĆ³n dentro de la pĆ”gina. |
| <section> </section> |
Es para dividire en partes el sitio web. |
| <footer> </footer> |
Es para el pie de pƔgina del contenido de la pƔgina. |
Imagenes
Es para insertar imƔgenes en el sitio web.
| Etiqueta |
DescripciĆ³n |
Ejemplo |
| <img> |
Con esta etiqueta insertamos la imagen |
 |
PROPIEDADES CSS DIRIGIDAS A TEXTO
Texto
Las propiedades de texto son las que nos permiten controlar el texto
como bloque y darle un estilo.
| Propiedad |
DescripciĆ³n |
Atributos |
| text-aling |
Alineamiento del texto |
left ; right ; center ; justify |
| text-decoration |
DecoraciĆ³n del texto |
Inherit ; none ; overline ; underline |
Fuentes
Se hacen cargo del estilo de las palabras.
| Propiedad |
DescripciĆ³n |
valores |
| font-family |
Es la que les da el estilo de las palabras |
Inheirt ; sans-serif; monospace |
| font-style |
Es el Estilo de la fuente |
normal ; italic ; oblique |
| font-size |
Es elTamaƱo de la fuente |
xx-small ; small ; medium ; large ; x-large ; la longitud ;
porcentaje
|
Colores y el fondo
Cumple con darle el color a la pƔgina web.
| Propiedad |
DescripciĆ³n |
atributos |
| color |
Color del texto |
Nombre:white , HEX:#FFFFFF |
| background-color |
Color de fondo |
Nombre: Blue, HEX:#0413D9 |
Listados de contenido
Son aplicables en los lisatados de contenido.
| Propiedad |
DescripciĆ³n |
Atributos |
| list-style-type |
Estilos para los listados, |
circle, square,decimal,none |
| list-style-image |
Imagenes para los listados. |
url(āā¦ā), none |
Tablas
Son para darle el diseƱo a nuestras tablas.
| Propiedad |
DescripciĆ³n |
Atribuciones |
| border-collapse |
Estilos de los bordes |
collapse ; separate |
| border-spacing |
Es para el espacio entre las casillas. |
longitud |
PROPIEDADES CSS DIRIGIDAS A OBJETOS
Modelo de cajas
La pƔgina se divide por cajas que permiten darle el tamaƱo a las
secciones.
Margin
Distancia de elementos.
| Propiedad |
DescripciĆ³n |
Atributos |
| margin-top |
TamaƱo del margen de arriba |
longitud ; porcentaje ; auto |
| margin-right |
TamaƱo del margen derecho |
longitud ; porcentaje ; auto |
| margin-bottom |
TamaƱo del margen gr abajo |
longitud ; porcentaje ; auto |
| margin-left |
TamaƱo del margen izquierdo |
longitud ; porcentaje ; auto |
| margin |
TamaƱo del margen |
longitud ; porcentaje |
Padding
TamaƱo cuadrado de los elementos que empuja a los otros elementos.
| Propiedad |
DescripciĆ³n |
atributos |
| padding-top |
TamaƱo del relleno de la parte de arriba. |
longitud ; porcentaje |
| padding-right |
TamaƱo del relleno derecho |
longitud ; porcentaje |
| padding-bottom |
TamaƱo del relleno de la parte de abajo |
longitud ; porcentaje |
| padding-left |
TamaƱo del relleno izquierdo |
longitud ; porcentaje |
| padding |
TamaƱo del relleno |
longitud ; porcentaje |
Bordes
Estilos de los bordes.
| Propiedad |
DescripciĆ³n |
Atributos |
| border |
Ancho, estilo y color para los bordes |
border-width ; border-style ; border-color |
| border-radius |
Radio de los bordes |
longitud ; porcentaje |
| border-style |
Estilo del borde |
none ; hidden ; dotted ; dashed ; solid ; double ; groove ; ridge
|
| border-color |
Color del borde |
color ; transparent |
| border-width |
Anchura del borde |
thin ; medium ; thick ; longitud |
Otros recursos aportables.
