HTML básico ( I )


Cuando abrí el blog nunca pensé en publicar algo que no tuviese relación directa con algún libro o autor, pero cuando me llegó un correo preguntándome por códigos y demás, pensé que lo mejor sería subir una entrada, así estaría a disposición de cualquiera y además podría actualizarla de ser necesario. Prometo que todo lo que mencionaré por aquí será muy, muy fácil. Vamos, que si yo pude aprender en su día, ¡cualquiera puede! De verdad que sí. :D Así pues, me dejo de ir por las ramas porque esto puede hacerse un poquito largo.

Empecemos por lo más básico: negrita, cursiva, subrayado y tachado. El texto debe de ir entre los siguientes códigos:

Negrita.Cursiva.Subrayado.Tachado.

Hasta aquí bien, ¿no? Pero puede hacerse mucho más, cambiar fuentes, espacio entre letras, añadir bordes, sombras... por ejemplo:

Lorem ipsum consectetur adipiscing elit. Proin et sollicitudin dui. Vestibulum placerat mauris libero, quis ullamcorper lacus laoreet nec. Fusce hendrerit risus at mauris euismod, vitae iaculis nisl pharetra. Maecenas ut augue blandit, vehicula sem sed, tempor sem. Vestibulum vel hendrerit urna, non lacinia dolor. Mauris pharetra dolor quis tellus molestie, eget ornare est finibus. Vestibulum mollis mollis risus, sagittis placerat nisi euismod ut. In facilisis nibh a nibh volutpat pretium a a turpis.





Llegado a este punto, y ya que se me ha olvidado antes, he de decir que no soy programadora y todo lo que sé lo he aprendido de forma autodidacta, por lo que mis explicaciones no serán las más correctas, pero sí espero que entendibles y útiles al menos, además, si hay algún error (aunque el resultado funcione) ¡tan solo decidme y encantada lo corrijo!. Dicho esto, sigamos. Para lograr lo anterior necesitamos hacer uso de las etiquetas div y span.

DIV. Es un elemento de bloque (podemos verlo como una caja), es decir, pueden contener otros elementos div y también span en su interior. Por defecto ocupan el 100% del espacio a lo ancho.

SPAN. Es un elemento de línea, es decir, pueden contener otros elementos en línea (span) pero no elementos en bloque (div)


En resumen, dentro de un div pueden agregarse otros elementos div y elementos span. Dentro de un elemento span, únicamente podremos añadir otros elementos span, al menos para que sea correcto.


ESTRUCTURA.

DIV.


SPAN.

PROPIEDADES BÁSICAS.

Ahora, solo tenemos que jugar con las diferentes propiedades con las que contamos. El formato siempre será: propiedad: resultado; o para hacerlo más sencillo: background: #eeeeee;. Y así una detrás de otra: background: #eeeeee; font-size: 13px; font-family: arial;

A continuación os dejo una lista de las más comunes.

BACKGROUND: Fondo del elemento, puede ser un color sólido o una imagen.
Color sólido: background: #000000; (color html) // background: red;
Imagen: background-image: url(LINK IMAGEN AQUÍ);

PADDING: Margenes dentro del elemento.
padding-top: 10px; (color html) // color: red;

COLOR: Color del texto.
color: #000000; (color html) // color: red;

FONT FAMILY: Fuente utilizada.
font-family: nombre fuente; (arial, calibri, courier new...)

TEXT-ALIGN: Alineación del texto.
text-align: tipo de alineación; (justify, center, right, left)

WIDTH: Ancho del div/span. (En caso de no utilizar esta propiedad el ancho ocupará el 100%)
width: 000px; (En pixeles)

HEIGHT: Alto del div/span. (En caso de no utilizar esta propiedad el alto ocupará lo mismo que ocupa el contenido)
height: 000px; (En pixeles)

Por ejemplo, el resultado de este código:


Sería:
Contenido bonito.



En caso de que el contenido (en este caso texto) ocupe más del alto del div, sobresaldrá:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisi dolor, vel feugiat sapien sodales sed. Integer dapibus sodales erat, ut accumsan massa pellentesque vitae. Donec bibendum quis est id placerat.



Para que esto no suceda, tan solo tendremos que añadir la propiedad overflow: auto; que añadirá un scroll.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisi dolor, vel feugiat sapien sodales sed. Integer dapibus sodales erat, ut accumsan massa pellentesque vitae. Donec bibendum quis est id placerat.



Y creo que, por ahora, voy a dejarlo aquí y hacer una segunda entrada más adelante para que no quede tan largo :D Espero que esto sea útil para alguien y haberme explicado bien. En caso de alguna duda tan solo comentadme y, de nuevo, si alguien que sepa más que yo ve algún error, le agradecería un montón que me lo comentase para poder corregirlo.

¡Gracias por leer! <3

3 comentarios:

  1. Entonces... El div es la caja esa de color que has hecho? Y otra pregunta, lo siento es que soy un poco principiante con esto XD, puedo poner otras fuentes que no sean las que vienen en blogger? No sé si me explico. Gracias por tu atención. Besos 😘

    ResponderEliminar
    Respuestas
    1. ¡En efecto! Aquí (http://codepen.io/Ethereal__m/pen/wzvkdz) he intentado hacerlo más visual, incluyendo div y span, espero haber conseguido algo y que quede más claro :D

      Y sí, se pueden utilizar fuentes de google font (https://fonts.google.com/) de este modo: http://i.imgbox.com/vk5wVNn5.png

      También pueden cargarse fuentes directamente desde el ordenador, por ejemplo la que utilizo para los títulos de los widgets lo está. De usarlas sin más, tú las verías al tenerlas ya descargadas pero aquellos que no las tengan en su ordenador, no. Aunque es más complejo como para explicarlo en un comentario, podría subir una entrada si a alguien le interesa :)

      Y creo que esto es todo, si tienes alguna otra duda o no te ha quedado claro, tan solo dime <3

      Eliminar
  2. ¡Hola! Yo soy un poco manca con esto del html no nos vamos a engañar, intento usarlo tan bien como puedo pero a veces me lío así que esto me vendrá muy bien jajaja Muchas gracias por todo y un besito <3

    ResponderEliminar