Sección HTML > Nivel 1 "Lo más básico"

Hoooola chic@s!!!!! Cómo están? Yo con ganas de enseñaros una de las nuevas secciones de mi blog!

Como habréis notado por el titulo... Esta sección trata sobre el HTML! En este, explicaré a mi manera lo básico del HTML. Aquí pondré todo lo que sepa y vaya aprendiendo, así que cualquier duda me dicen! Además, esta sección tendrá un sub-apartado de códigos concretos (gadgets, personalizar, eliminar espacios del blog),  todo serán cosas que me preguntéis para ayudaros así con vuestras dudas!

Empezaré explicando distintos tipos de códigos para editar vuestros gadgets, entradas, etc. Por ahora, solo explicaré los códigos individuales pero más adelante os diré cómo añadirlo a vuestros gadgets o entradas!

HTML

El HTML se compone de varios "packs" de códigos. Digamos que cada pack es para referirse a un espacio de la plantilla de tu blog (gadgets, entrada, cabecera,...), para editar cada uno de ellos, hay una serie de "códigos individuales" que se usan para editar cada pack. Por ejemplo...

nombre-de-elemento{

border: 1px solid #fff;

text-align: center;

width: 300px;

height: auto;

}

Naranja: Ese sería el "pack" en cuestión, dependiendo de la parte del blog que quieras editar se pone un nombre u otro! Dentro de ese pack (entre los { } ) se ponen los códigos individuales. Cada espacio tiene un nombre concreto, así que más adelante os diré cuales para que editéis lo que queráis.

Lila: Esos son los "códigos individuales" que te dicen el contenido de cada espacio del blog. Allí pondrás anchos, bordes, colores, tipo de texto, etc!

Azul: Recordad, que cada uno de estos códigos debéis cerrarlos poniendo un ; al final de cada uno, para que no se junten todos los códigos.

Lo básico

Bueno, empezaré explicando lo básico en entradas o títulos!

A la hora de escribir algún texto, puedes marcar en el html que este en negrita, cursiva, tachado, etc. Aún que solo funciona a la hora de crear una entrada, personalizando el titulo o el post en sí (esquina superior [Redactar / HTML]) o cuando creas un nuevo gadget (en el titulo o en el contenido).

En el HTML general del blog no funciona, solamente se puede marcar en el texto que quieras.

<br>

Espacio (cómo el Enter del teclado pero en formato html)

<b>Texto en negrita</b>

Para poner texto en negrita!

<i>Texto en cursiva</i>

Para poner texto en cursiva.

<u>Texto subrayado</u>

Para poner texto subrayado.

<strike>Texto tachado</strike>

Para tachar el texto.

<a href="URL">Texto que se muestra</a>

Para poner un enlace.

Ahora ya empezaré a explicar los "códigos individuales" más básicos que van dentro de cada código!

 Medida 

Para decidir el ancho y alto de cualquier imagen o forma/gadget, lo marcamos con Width [Ancho] y Height [Alto]!
width: 10px;

height: 10px;

Para decidir el ancho/alto debéis poner una cifra antes de px (pixeles) [Ejemplo: width: 250px], y luego, para que la imagen no se deforme, en la parte del Height simplemente elimináis el px y ponéis auto [Ejemplo: height: Auto;], así automáticamente se pondrá al tamaño correcto sin deformarse. Aún que si quieres decir la medida de alto de la imagen simplemente haces igual que con el Width.

 Text-align 

Esto es de lo más básico! Para poder centrar una imagen/texto:
text-align: center / left / right;

Tu decides si lo quieres centrado (Center), a la derecha (Right) o izquierda (Left).

 Color + Códigos de colores 

Este código es para decidir el color que quieres usar! Normalmente se usa para el texto.
color: #ffffff;

Cada color tiene su propio código! Por ejemplo el blanco es #ffffff y el negro #000000, y así con todos los colores!
CÓDIGOS DE TODOS LOS COLORES
Un truco que aconsejo, es que los códigos de colores con solo una letra/numero (el blanco por ejemplo que solo son f), es puede abreviar poniendo solo 3 del la misma letra/numero.... Por ejemplo:

#ffffff = #fff
#000000 = #000

En el caso de que el código sea así #fffff2 este truco ya no funciona!

 Background 

Background es para editar el fondo! Puedes poner el color o imagen que quieras...
Para ponerle un color simplemente cambia la parte que esta en cursiva...
background: #fff
Para ponerle una imagen, pon el link de la que quieras en la parte en cursiva!
background: #fff url ("link imagen")
En el caso de querer un fondo transparente....
background: transparent;

También puedes decidir la posición de la imagen poniendo center / left / right!

background-position: center center;

 Border-radius 

Este es el código para redondear los bordes! Hay dos maneras de hacerlo...
Para redondear todas las esquinas al mismo tamaño:
border-radius: 10px;

Para redondear las esquinas por separado, es decir, puedes redondear solo las dos esquinas inferiores, superiores o solo una si quieres!

border-radius: 0px 0px 10px 10px;

border-radius: 0px 0px 10px 10px;
[Esquina superior izquierda / superior derecha / inferior derecha / inferior izquierda]

Cuanto más grande el numero que pongas, más se redondeará el borde!

 Border 

Con este, podrás añadirle un borde a cualquier forma/gadget/lo que sea (menos imagen)!
Hay varias maneras de ponerlo.... Desde en general (que hace un borde igual a todos los lados):
border: 1px solid #fff;

Hasta editando lado por lado!
[Bottom: Bajo / Top: Arriba / Left: Izquierda / Right: Derecha]

border-bottom: 1px solid #fff;

border-top: 1px solid #fff;

border-left: 1px solid #fff;  

border-right: 1px solid #fff;

Un detalle de este código, es que hay distintos tipos de bordes, dependiendo del estilo que le quieras dar...

Double / Solid
Dashed / Dotted

border: 1px solid #fff;

Double: Doble borde! Para que este funcione, debes parte como mínimo 3px, si no te saldrá una linea normal! Cuanto más grande el numero, más anchas serán las lineas, aún que recomiendo usar solo 3px o 5px.
Solid: Es una linea simple.
Dashed: Linea discontinua.
Dotted: Linea de puntos.

Cuanto más grande pongas el numero de px. más grande te saldrá el borde! Además de que puedes poner el color que quieras.

Aquí termina la primera entrada de la Sección HTML!

Espero que os haya gustado esta sección y os sea útil! Cada vez iré explicando cosas más complicadas :D Si algo no se entiende, no duden en preguntar! Y si quieren que explique algo en concreto me lo comentan y lo añadiré en una de las próximas entradas!
¡Esperare vuestros comentarios!

Todas las entradas/niveles: 1 / 2 / 3 / 4