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
Solicita información sobre nuestros bootcamps

Related Posts

Digital tech has changed the face of business

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

March 22, 2024

Descubre los 3 factores esenciales que determinan el éxito en tu cambio profesional. Desde...

Educational and Research-Focused AI: Collaborative Learning with Technology

Qué es el machine learning y cómo está transformando nuestro mundo

March 16, 2024

Descubre en qué consiste el Aprendizaje Automático y cómo está cambiando radicalmente...

Multimodal Interaction with AI: Businessman Engaging with AI Chat that Sees, Hears, and Speaks. Chatbot AI Conversation Concept

La IA no te quita tu trabajo, te lo quita alguien que pueda utilizarla

March 5, 2024

Descubre en nuestro blog cómo la inteligencia artificial potencia carreras en lugar de...

¿Listo para transformar tu vida?

SUSCRIBETE A NUESTRO NEWSLETTER

Recibe noticias sobre nuestros programas