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.

Cabecera y enlazado de archivos

En la cabecera de un archivo HTML siempre vamos a poner unas líneas prácticamente estándares que dotaran de la información necesaria al documento para que los navegadores los interpreten mejor.

<!DOCTYPE html> (Le dice el tipo de documento que es)

<meta charset="utf-8" /> (Para que interprete acentos, ñ, entre otros caracteres)

<meta http-equiv="X-UA-Compatible" content="IE=edge"> (Compatibilidad con Edge "Internet Explorer")

<meta name="viewport" content="width=device-width, initial-scale=1.0"> (Información relativa al tamaño de pantalla)



Metadatos HTML


<title>Titulo de la web</title> (Metadatos del titulo)

<meta name="Description"content="Descripción de la web" /> (Metadatos de la descripción)


Enlazado de archivos

Aquí se añaden las rutas de donde tenemos los recursos. Normalmente se suele añadir rutas a los archivos de estilos css y a los frameworks que utilicemos, como por ejemplo Bootstrap.

<link rel="stylesheet" href="js/bootstrap.min.js"> (Enlaza al archivo boostrat Java Script)

<link rel="stylesheet" href="css/bootstrap.min.css"> (Enlaza al archivo boostrat CSS)

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> (Enlaza al archivo de estilos)

Cada ruta puede ser diferente y se pone después del href de este modo: href="carpeta\archivo.loquesea"

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.extensión" 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;
Hacer una imagen responsive: width: 100%; height: auto;
Mostrar código sin que se aplique: pre
Centrar un vídeo: margin: 0 auto; width: 800px;
Aplicar estilos en linia: style="font-size:10px;"
Aplicar estilos a un tamaño máximo de pantalla: @media (max-width: 1000px){aquí los estilos}
Aplicar estilos a un tamaño mínimo de pantalla: @media (min-width: 1000px){aquí los estilos}

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.

Dejar el menú fijo

 /*Menú fijo*/

.site-header{
position: fixed;
top:0;
width:100%;
height:20px;
z-index:9999;
}
#content{
margin-top:45px
}
@media (max-width: 1000px){
#content{
margin-top:0px;
}
.home{
margin-top:px;
	}
	body
{
font-size:16px;
}
}

/*Menú fijo fin*/

Hay un apartado para ajustar el margen en tamaño móvil y en tamaño escritorio, esto hay que ajustarlo a tu tema.

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.