7 hacks en HTML / Java que debes aprender

7 hacks en HTML / Java que debes aprender

En el desarrollo de páginas web, HTML y Java son los lenguajes que más destacan, porque hacen posible la construcción de páginas web muy variadas de forma más sencilla.

Así que, es importante conocer los 7 hacks en HTML / Java que debes aprender para facilitar el desarrollo de páginas web.

¿Qué es HTML?

HTML es el lenguaje con el que se define o estructura el contenido de las páginas web, ya sean imágenes, texto en párrafos, listas o tablas de datos. 

El Lenguaje de Marcado de Hipertexto o HyperText Markup Languaje (HTML) consta de un grupo de etiquetas que ayuda a definir el texto y demás elementos de la página web. El código HTML funciona en cualquier sistema operativo y en cualquier navegador.

¿Qué es Java?

Java es un lenguaje de programación de código abierto, orientado a objetos, usado para el desarrollo de aplicaciones y tareas de backend. Aunque no está exclusivamente enfocado a la web, permite crear aplicaciones que la transforman en una herramienta muy útil e interesante.

Los 7 hacks en HTML / Java más recientes o menos conocidos

Los hacks son utilizados para facilitar y simplificar la programación en lenguajes, de hecho, las Hojas de Estilo en Cascada o CSS son un lenguaje para gestionar el aspecto y la presentación de las páginas web.

Dentro de los hacks que existen, resaltan los hacks de CSS, que incluyen diversas técnicas para gestionar las interpretaciones que hacen los navegadores, garantizando que las páginas web se visualicen de la misma manera sin importar el navegador que se utilice.

1. Cambiar el color de la página

Este hack le asigna un color de fondo a toda la página web, a través de códigos hexadecimales y permite  cambiar el código de color como quieras. El código es:

html {

  background-color: #00539F;

}

2. Agregar una imagen como fondo

Para agregar una imagen como fondo al cuerpo (body) de la página, se usa la URL de la imagen, como se muestra en el hack siguiente:

body { 

  background-image: url(«barn.jpg»); 

}

3. Centrar la imagen

Para centrar la imagen, el hack indica que la imagen “img” debe tratarse como un bloque (block), cuando se muestra: “display”.

Mientras que, la instrucción “margin” establece el margen para los cuatro lados de la página, cuando solo se especifica un valor.

img {

  display: block;

  margin: 0 auto;

}

4. Cambiar el estilo de la fuente

Para cambiar el estilo de la fuente de las letras utilizadas en la página web, hay que utilizar el siguiente hack:

.italic { font-style: italic; }

Se usa italic, si se desea que la letra sea cursiva, aunque también se pueden usar otros valores como: normal y oblique.

5. Crear sombras de texto

El hack en CSS para crear el sombreado de un texto de la familia “sans-serif” es el siguiente:

p {

font-size: 50pt;

font-family: sans-serif;

text-shadow: 10px 11px 18px rgba(255, 0, 0, 1),

-10px -11px 18px red;

}

El código “text shadow” permite crear dos sombras para elementos de un párrafo <p>, cuyo número de sombras puede aumentarse, si se desea.

En esta instrucción, los primeros dos elementos establecen la posición de la sombra, coordenadas X y Y, mientras que el tercer elemento determina el tamaño.

Finalmente, es posible definir el color de la sombra de dos maneras:

  • A través de la instrucción: rgba(255, 0, 0, 1)
  • Colocando directamente el color: red;

6. Destacar la primera letra de un párrafo

Para destacar la primera letra de un párrafo, el hack que se necesita es el siguiente:

P {

  font-family: «bookman old style»

}

p:first-child::first-letter{

  font-family: «papyrus»;

  font-size: 25px

  font-weight: bold

}

Inicialmente, se estable el font para todo el texto y después, a través de la instrucción “first-letter”, se establece el font que destacará la primera letra.

7. Dar estilo al cuerpo del documento

El hack para dar estilo al cuerpo (body) del documento es el siguiente:

body {

  width: 600px;

  margin: 0 auto;

  background-color: #FF9500;

  padding: 0 20px 20px 20px;

  border: 5px solid black;

} 

Mientras que “padding” es el espacio entre el contenido y los bordes de la página, que junto a “border”, es el que coloca un borde al cuerpo del documento.

Conviértete en un experto en tecnología con nuestros bootcamps

Click

¿Quieres más información sobre nuestros bootcamps?

Blogs Relacionados

Programando tu futuro: Tips para optimizar tu CV como desarrollador

Destaca tus habilidades, proyectos y experiencia para impresionar a los reclutadores. ¡Descubre cómo!…

¿Qué es una API REST y cómo revoluciona la comunicación entre aplicaciones?

Descubre cómo las APIs REST revolucionan la comunicación entre aplicaciones, mejorando la flexibilidad y escalabilidad de tus sistemas….

Los 3 factores clave que definen el éxito en el cambio profesional

Descubre los 3 factores esenciales que determinan el éxito en tu cambio profesional. Desde el autoconocimiento hasta la construcción de…