Recursos HTML y CSS para WordPress

No te asustes que no vas a tener que aprender a programar, pero tener nociones de HTML y CSS te ayudara a personalizar tu web.

El HTML se usa para hacer la estructura de una web, así como la estructura de una casa. Con el puedes estructurar una web, añadir contenido y definir su tamaño. Hay unas pocas etiquetas que se usan de vez en cuando y va bien que las tengas presentes.

Sintaxis y etiquetas del HTML

La sintaxis es la forma en la que se escriben las etiquetas «el código» siempre se empieza con < y se acaba con /> dentro de este espacio se añade todo.

Etiquetas

Las etiquetas con pequeños «códigos» que tienen una función, por ejemplo la etiqueta <a/> sirve para crear un enlace, la etiqueta <img/> sirve para añadir una imagen, existen muchas etiquetas diferentes pero no tienes que saberlas todas no te preocupes.

Atributos

En muchas ocasiones las etiquetas necesitan atributos para funcionar, por ejemplo la etiqueta <img necesita el atributo src /> normalmente después de los complementos va el signo de = seguido de «aquí dentro se pone el objeto (La foto)» y se cierra />

Clases

Aquí vemos como se añade una imagen en HTML <img src=»/carpeta/nombre.extension» class=»nombre»/> se le pueden añadir mas atributos como la altura, anchura, descripción, pie de foto, etc.. si has comprendido esto es suficiente.

Recursos HTML mas usados

Crear un enlace HTML: <a href="destino después de hacer clic">Texto del enlace</a>
Enlace HTML para llamar: <a href="tel:+34666555444">Teléfono</a>
Enlace correo HTML: <a href="mailto:tucorreo@gmail.com">Tu correo</a>
Añadir una imagen HTML: <img src="/carpeta/nombre.extension" class="nombre"/>
Texto en negrita HTML: <b> Texto en negrita </b>
Titulo principal HTML: <h1>Titulo principal</h1> 
Titulo secundario HTML: <h2>Titulo secundario</h2> 
Dar un salto de línea "como hacer enter": </br>
Crear una línea en HTML: </hr>
Agrupar cosas en una caja: <div> Contenido de la caja, texto, imágenes, etc... </div>
Crear un párrafo: <p> El párrafo quedara aquí dentro </p>

Sintaxis CSS

Esta sintaxis es aun mas simple que la usada en HTML. Primero se escribe la clase o ID que queremos atacar, si es una clase comenzamos con un punto y si es una ID con almohadilla,  después abrimos claudator {} y dentro de este se añade la propiedad, siempre se cierra con punto y coma; ejemplo:

.baner{margin-top:10px;}
#baner{margin-top:10px;}

Se pueden añadir tantos atributos como se desea dentro de la misma clase. También se puede atacar a una etiqueta directamente, pero de ese modo se va a generalizar el estilo en todas las etiquetas de la web, como por ejemplo:

h1{font-size: 36px;
color: #000;
font-family: 'Open Sans';}

Esto va cambiar el estilo del titulo principal en todos los sitios de nuestra web que tengan un h1.

Recursos CSS mas usados

Márgenes generales: margin:10px;
Margen superior: margin-top:10px;
Margen inferior: margin-bottom:10px;
Margen derecho: margin-right:10px;
Margen izquierdo: margin-left:10px;
Tamaño del texto: font-size:14px;
Anchura del texto: font-weight:600;
Tipo de letra: font-family: 'Open Sans';
Color de fondo: background-color: red;
Quitar el formato de un texto: text-decoration:none;
Transformar texto a mayúsculas: text-transform: uppercase;
Ocular algo: display:none;
Añadir un borde: border: solid black 1px;
Redondear un borde: border-radius:5px;
Centrar un texto: text-align:center;
Crear espacio dentro de un elemento: padding:14px;
Asignar un color: color: white;

El HTML en WordPress lo usaremos poco, pero en ocasiones hay que usarlo ya sea para modificar un footer o para reparar algún problema causado por el editor de WordPress y no esta de mas tener estos recursos a mano.

El CSS lo usaremos casi en cualquier proyecto para hacer pequeños retoques y si queremos hacer algo mas especifico lo buscamos en google y listo.